How to add a favicon to WordPress (Site Icon and full set)

9 min read

WordPress makes adding a basic favicon easy — and a complete, modern favicon only slightly harder. The built-in Site Icon takes two minutes and covers more than most people expect. What it does not give you is an SVG favicon, a dark-mode variant or a web app manifest under your control. This guide covers both routes honestly: start with the Site Icon if you need an icon today, then add the full package when you want iOS, Android, Google and dark tabs to all get the artwork designed for them.

The short answer

For the built-in route, prepare a square image of at least 512×512 pixels, open Appearance → Customize → Site Identity → Site Icon, upload it, crop it and publish. WordPress stores the image, generates smaller sizes and outputs the tags for you. For the full-package route, generate the files with a favicon generator, upload them to your site, and add the supplied HTML to your theme — then remove or keep the Site Icon deliberately, not by accident, so two systems are not competing to declare different icons.

Step 1: Prepare artwork that survives WordPress cropping

WordPress asks for a square image and shows you a crop step. That crop is where favicons go wrong: a wide logo with the wordmark beside the symbol becomes either a tiny unreadable lockup or a symbol with its edges trimmed. Before you upload anything, make a favicon-specific version of your mark.

  • Use the symbol, not the whole logo. At 16 pixels in a browser tab, a monogram, initial or compact symbol stays recognisable while a horizontal lockup dissolves. If your brand has both, the favicon is the symbol's job.
  • Start square and large. Export at least 512×512 pixels — or your original SVG. Every size WordPress or a generator produces is a downscale from this master, and downscaling is clean where upscaling invents blur.
  • Give it a deliberate background. A transparent mark looks fine until iOS fills the transparency with black or a dark browser tab swallows a dark logo. An opaque brand-coloured background with the mark centred inside it behaves predictably everywhere.
  • Keep clear margins. WordPress shows the crop, phones apply their own masks, and Android launchers crop to circles. Keep the important artwork away from the edges — inside the central area, roughly the middle 80% — so no mask can amputate it.
  • Judge it at 16 pixels. Shrink a preview to favicon size before uploading. If you cannot tell what it is at 16×16, simplify the artwork rather than hoping a larger export will fix it.

If you have no suitable artwork yet, the logo maker builds a simple letter, emoji or symbol mark in the browser and hands it straight to the favicon editor — a better starting point than a photograph or a detailed illustration, neither of which survives favicon sizes.

Step 2: Add the Site Icon (the built-in route)

  1. Log in to your WordPress admin and open Appearance → Customize.
  2. Open Site Identity and find Site Icon — some themes and WordPress versions label the section slightly differently, but the Site Icon control has lived there for years.
  3. Choose Select site icon, upload your square image (512×512 or larger), and confirm the crop. WordPress may let you crop for the browser icon and the app icon; keep the mark centred with margins in both.
  4. Click Publish, then open your site in a private window and look at the tab.

What you get for those two minutes is genuinely useful. WordPress generates resized versions of your upload, declares the browser icon and the Apple Touch Icon, and uses the image as the app icon where WordPress itself needs one — including in the admin and the WordPress app. For a blog or brochure site whose owner will never open a theme file, this is a respectable finish line, and it is infinitely better than the default WordPress or theme icon your visitors see today.

What the Site Icon does not do

Know the limits before deciding the built-in route is enough:

  • No SVG favicon. The Site Icon is raster artwork. You do not get the crisp-at-every-size SVG that Chrome, Edge, Firefox and Opera prefer, and file weight is whatever the generated PNGs weigh.
  • No dark-mode variant. One fixed picture must survive light and dark browser tabs. Design it high-contrast with its own background, because there is no second version to swap in — an SVG with a prefers-color-scheme variant is the format that solves this properly, as our dark-mode SVG guide explains.
  • No web app manifest under your control. Android home-screen and install icons come from a site.webmanifest. WordPress core's Site Icon alone is not a promise that a maskable 192×192 and 512×512 pair, with your name, colours and display mode, is being served the way a manifest icon setup requires.
  • One artwork for every context. The design that reads well in a tab is also what iOS rounds and Android masks. Dedicated platform artwork — an opaque, padded touch icon, a full-bleed maskable icon — needs the full package.

None of this makes the Site Icon bad. It makes it a starting point: complete for simple needs, incomplete for a brand that cares how it looks saved to a phone.

Step 3: Install the complete package (the full route)

Generate the package first. Drop your master artwork into the favicon generator, use the live previews to set the background, margins and dark icon, and download the result: favicon.svg, favicon-96x96.png, favicon.ico, the 180×180 apple-touch-icon.png, the two manifest PNGs, site.webmanifest and the exact HTML block to declare them. Generation happens in your browser, so an unreleased logo is never uploaded to us. Then install it in WordPress:

  1. Upload the files where the HTML expects them. The generated markup points at your site root (/favicon.svg and friends). Upload the files to the root of your WordPress installation with your host's file manager or (S)FTP — the same folder that holds wp-config.php is the web root in most installs, but confirm the files open at yoursite.example/favicon.svg before going further. If you keep them elsewhere, adjust the paths in the markup and in the manifest consistently.
  2. Add the HTML to every page. The tags belong in the <head>. The maintainable places, in order of preference: a child theme's header.php or a small wp_head snippet in the child theme's functions.php; a reputable header-and-footer code plugin if you do not run a child theme; or your theme's built-in custom-code field if it offers one. Edit a parent theme directly only if you accept that the next theme update can erase the change.
  3. Resolve the Site Icon overlap. If WordPress is also outputting Site Icon tags, visitors' browsers will pick between two declarations unpredictably. Either clear the Site Icon (Customizer → Site Identity) and let your package be the only declaration, or keep the Site Icon as the admin/app image knowing the front end should be served by your files alone. Check the page source afterwards: each icon should be declared once.
  4. Keep the manifest reachable. The <link rel="manifest"> tag and every icon path inside site.webmanifest must resolve. Icon URLs in a manifest resolve relative to the manifest file, so do not move the PNGs without updating it.

Which file does what — the 96×96 PNG and Google's size guidance, the ICO's root convention, the touch icon's opacity — is covered file by file in the favicon sizes and formats cheat sheet, and the head-to-head format comparison is in PNG vs ICO vs SVG. Not on self-hosted WordPress? If your site runs on a hosted builder instead, use the Shopify, Wix and Squarespace favicon guide; if you have no logo to upload yet, start with a favicon made from text or an emoji.

Step 4: Clear the caches — all three of them

WordPress sites cache at more layers than almost any other stack, and favicons are cached aggressively on top of that. Work outward:

  • Browser: test in a private window, then open /favicon.ico directly and hard-refresh (Ctrl+F5). Favicons are cached separately from pages, sometimes for weeks; our favicon not showing up guide works through this in order.
  • Plugins and host: purge your caching plugin and any host-level or CDN cache after changing the files or the header markup, or you may be testing yesterday's page.
  • Version the URLs when you replace an icon: appending ?v=2 to the icon URLs in your markup forces browsers to fetch the new files. The generator can add a version for you.

Google search results are the slowest surface of all: even a perfect install can take days or longer to replace the old icon there, and that delay alone does not mean anything is broken.

Step 5: Verify the live site, not the dashboard

Run your domain through the favicon checker. It fetches the deployed page as a visitor would, lists every declared icon with its real size and format, inspects the manifest, and previews the result in browser tabs, Google results and on iOS and Android home screens. Then do the two tests no tool replaces: add the site to a real iPhone home screen and confirm the touch icon is opaque and uncropped, and add it on Android and confirm the mask has not trimmed your mark. Finally, view the page source and confirm there are no duplicate Site Icon declarations left behind.

Quick questions

What size should my WordPress Site Icon be?

Upload a square of at least 512×512 pixels. WordPress generates the smaller sizes it needs; starting larger keeps every downscale clean. Starting from your original SVG artwork is better still if you use the full-package route.

Can I upload an SVG as the Site Icon?

WordPress does not accept SVG uploads by default, and the Site Icon flow is built around raster images. Serve the SVG through the full-package route instead, with the PNG and ICO fallbacks declared alongside it.

My theme already shows a favicon. Where is it coming from?

Possibly the Site Icon, possibly a theme setting, possibly tags in the theme's header. View the page source, search for rel="icon" and apple-touch-icon, and remove or replace the declaration at its source — stacking a second set of tags on top gives browsers a choice you do not control.

I changed the icon but the old one is still everywhere. Did it fail?

Almost certainly caching — browser, plugin, host or CDN — rather than a failed upload. Purge each layer, test in a private window, version the URLs, and give Google days rather than minutes.

The short version

Need an icon today? Appearance → Customize → Site Identity → Site Icon, with a square 512×512 symbol on a deliberate background. Want every platform served properly? Generate the complete package, upload it to the root, add the markup once through a child theme or trusted code plugin, remove the competing Site Icon declaration, purge the caches and verify with the favicon checker and a real phone. Create the WordPress-ready package in your browser and preview it on every platform before you upload a file.

All favicon articles