How to Add a Favicon in WordPress (Site Icon): Where the Setting Is, Size and Format

To add a favicon in WordPress, go to Settings > General, find Site Icon, click Choose a Site Icon, and upload a square image that is at least 512 × 512 pixels. Crop it if asked, save the settings, and WordPress generates every size a browser, phone or search engine will ask for. That setting has been on the General page since WordPress 6.5, and it works whether your theme is a block theme or a classic one.

WordPress calls the favicon the Site Icon, which is why you will not find the word “favicon” anywhere in the dashboard. This guide covers the three places you can set it, what image to use (and the one format to avoid), what WordPress actually outputs, Google’s rules for showing it in search results, and the reasons a new favicon sometimes refuses to appear.

What a favicon (site icon) is, and where it shows up

A favicon is the small square icon that represents your site. Once set, WordPress uses the same image everywhere an icon is expected: the browser tab and bookmarks, the home-screen icon when someone saves your site on a phone, the tile on Windows, the WordPress login screen and admin bar, and, if Google approves of it, next to your listing in search results on both mobile and desktop. One upload covers all of them.

---

Prepare the image first

WordPress is strict about one thing and relaxed about the rest. The image must be square and at least 512 × 512 pixels; the Site Icon picker will not accept anything smaller, and it offers to crop anything that is not square. Beyond that:

• Use a PNG. It is the format WordPress’s own documentation recommends, it supports transparency, and it survives the four resizes WordPress performs. JPEG and WebP work too, but you lose transparency.
• Do not use an SVG. WordPress does not allow SVG uploads by default (they are not in its permitted file types, because an SVG can carry scripts), the Site Icon cropper needs a raster image, and Google’s list of favicon formats it will display does not include SVG. There is a way to add an SVG favicon for browsers, covered further down, but it is an addition to the PNG, not a replacement.
• Keep it simple and readable at 16 pixels. A mark or a single letter beats a full logo with text. Check it against light, dark and grey tab bars, since browsers and operating systems differ; a contrast checker helps if you are unsure.
• Leave a little padding. Android and some launchers mask icons into circles or rounded squares, so anything touching the edge gets clipped.

If you do not have an icon yet, EasyFavicon makes one from a letter, an emoji or an uploaded image, and exports the full set (a 512-pixel PNG for WordPress, plus ICO, SVG and the other sizes) in the browser, free and without an account. Disclosure: it is a tool made by SmartWP’s author, so use whichever generator you like; the point is a clean square PNG of at least 512 pixels.

---

Method 1: Settings > General (WordPress 6.5 and later, any theme)

WordPress 6.5 added a Site Icon field to the General settings page so that block-theme users, who do not have the Customizer, could set one without touching a template. It works for classic themes as well, and it is now the simplest route on any site.

1. Go to Settings > General and scroll to Site Icon.
2. Click Choose a Site Icon. The media library opens; upload your 512 × 512 image or pick an existing one.
3. If the image is not square, WordPress shows a cropper. Adjust the selection and click Crop Image. A square image skips this step.
4. Check the preview, which shows the icon as a browser tab and as an app icon, then click Save Changes at the bottom of the page.

The same block on that page has a Remove Site Icon button, which is also where you take an icon off later.

Method 2: the Customizer (classic themes, WordPress 4.3 to 6.4)

If your theme is a classic theme you will also see Appearance > Customize, and the Site Icon has lived in its Site Identity panel since WordPress 4.3. The result is identical to Method 1; it is the same setting with a different door. Block themes do not show the Customize menu unless a plugin adds it, which is why that route confuses people on newer sites.

Open Appearance > Customize, then Site Identity.

Click Select site icon, choose or upload the image, crop if prompted, and click Publish.

Method 3: the Site Logo block (block themes)

Block themes have a third option inside the Site Editor. Select the Site Logo block in your header, and in its settings sidebar turn on Use as site icon. WordPress then uses your logo image as the Site Icon as well, which is convenient if your logo already reads well as a small square. If it does not, leave the toggle off and use Method 1 with a dedicated icon.

---

What WordPress actually outputs

You never need to edit a template or create a favicon.ico file. When a Site Icon is set, WordPress crops your upload into four sizes and prints four tags in the head of every page and on the login screen. Here is the real output from this site:

<link rel="icon" href="https://smartwp.com/wp-content/uploads/2020/04/cropped-smartwp-v2-icon-32x32.png" sizes="32x32" />
<link rel="icon" href="https://smartwp.com/wp-content/uploads/2020/04/cropped-smartwp-v2-icon-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://smartwp.com/wp-content/uploads/2020/04/cropped-smartwp-v2-icon-180x180.png" />
<meta name="msapplication-TileImage" content="https://smartwp.com/wp-content/uploads/2020/04/cropped-smartwp-v2-icon-270x270.png" />

Size	Used for
32 × 32	Browser tabs, bookmarks and history
192 × 192	Android home screen and Chrome
180 × 180	iOS home screen (apple-touch-icon)
270 × 270	Windows tiles (msapplication-TileImage)

For developers, all of this is filterable. site_icon_image_sizes changes which sizes are generated, site_icon_meta_tags lets you edit or add to the printed tags, and the whole set hangs on wp_head at priority 99 through wp_site_icon(). If you install a plugin that manages a complete icon set itself, such as Favicon by RealFaviconGenerator, you can stop WordPress printing a second set:

// If a favicon plugin prints its own tags, stop WordPress printing the Site Icon set too.
remove_action( 'wp_head', 'wp_site_icon', 99 );
remove_action( 'login_head', 'wp_site_icon', 99 );

---

Google’s rules for showing your favicon in search

Google shows favicons next to results on mobile and desktop, but only if the icon meets its guidelines. The ones that matter in practice:

• It must be crawlable. Googlebot needs to fetch both the icon file and your homepage, so do not block /wp-content/uploads/ or the homepage in robots.txt.
• Size: at least 8 × 8 pixels, and Google recommends larger than 48 × 48 so it looks good everywhere it is used. The 192-pixel version WordPress generates is comfortably above that.
• Format: Google lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on the list, which is the second reason to make your Site Icon a PNG.
• Keep the URL stable. Google asks that you do not change the favicon URL frequently. WordPress gives each new upload a new file name, so change the icon when you mean to, not experimentally.
• It must represent your brand and cannot be something Google deems inappropriate; otherwise it substitutes a default icon.

Updates are slow. Google says recrawling the favicon “can take anywhere from several days to several weeks.” If you have just changed it, open Search Console, run the URL Inspection tool on your homepage and request indexing; that is the only lever you have.

---

Should a favicon be SVG or ICO?

Neither, for WordPress: make the Site Icon a PNG and let WordPress do the rest. The longer answer, since the question comes up constantly:

• ICO is the legacy format that browsers request from /favicon.ico when a page declares no icon at all. WordPress declares its icons explicitly, so you do not need one, though there is no harm in also dropping a favicon.ico in your site root for very old software.
• SVG favicons are supported by about 92% of browsers in use, and Safari finally added support in version 26 after ignoring them for years. They scale perfectly and can adapt to dark mode. But WordPress will not accept one as a Site Icon, and Google will not show one in search results.
• The workable combination is a PNG Site Icon for Google, older browsers and every home-screen use, plus an optional SVG that modern browsers can prefer for the tab.

To add that optional SVG, put a favicon.svg in your child theme folder and print one extra tag after WordPress’s own, using the Code Snippets plugin or your child theme’s functions.php:

// Add an SVG favicon for browsers that support it. Keep the PNG Site Icon for Google and older browsers.
add_action( 'wp_head', function () {
    echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/favicon.svg' ) . '" type="image/svg+xml">' . "\n";
}, 100 );

Browsers that understand SVG icons will pick it up; everything else falls back to the PNG tags WordPress already printed. Keep the SVG free of external references and scripts, and do not switch on SVG uploads in the media library just to do this; the file lives in your theme, not the library.

---

Favicon not showing or not updating?

Nine times out of ten the icon is set correctly and something is holding on to the old one. Work down this list:

• Open the site in a private window. If the new icon appears there, your browser has cached the old one; a hard refresh (Ctrl + F5, or Cmd + Shift + R on a Mac) usually clears it, and some browsers keep favicons until you close every tab for the site.
• Purge your caching plugin and CDN. Page caches store the whole head of the page, including the old icon tags, until they are cleared.
• View the page source and search for rel="icon". You should see exactly one set of tags pointing at your new file. Two sets means a theme option or plugin is printing its own icon and winning; use its setting or the remove_action snippet above.
• Check the upload itself. If the picker refused your image, it was under 512 pixels or not an image WordPress can open (an SVG, most often). Export a larger PNG and try again.
• Give Google time. Search results update on Google’s crawl schedule, not yours, and can lag by weeks. Requesting indexing of the homepage is the only way to nudge it.

Removing a site icon

Go to Settings > General, find Site Icon, and click Remove Site Icon, then save. On a classic theme the Customizer’s Site Identity panel has a matching Remove button. The image stays in your media library; only the setting is cleared, and WordPress stops printing the icon tags immediately.

---

Frequently asked questions

---

Bottom line

Make a square PNG of at least 512 pixels, set it under Settings > General, and you are done: WordPress generates and prints every size that browsers, phones and Google need. Skip SVG for the Site Icon, give Google a couple of weeks to catch up, and if a new icon does not appear, suspect a cache before you suspect the setting.