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 WordPress asks, click Save Changes, and WordPress generates every size a browser, phone or search engine will ask for. The setting has been on the General page since WordPress 6.5 and works on block themes and classic themes alike.

WordPress calls the favicon the Site Icon, which is why the word “favicon” never appears in the dashboard. I checked everything below against the core source of WordPress 7.1 and ran the output tests in WordPress Playground on 7.1.4: where the setting lives on each kind of theme, what image to use, the exact tags WordPress prints, what happens to /favicon.ico, Google’s rules, and why a new icon sometimes refuses to show.

Your setup	Where to set the favicon	Button label
WordPress 6.5 or later, any theme	Settings > General > Site Icon	Choose a Site Icon
Classic theme (WordPress 4.3 or later)	Appearance > Customize > Site Identity > Site Icon	Select image
Block theme	Site Editor: select the Site Logo block, turn on the toggle	Use as Site Icon
Older than 4.3, or a theme option	Theme settings panel or a plugin	Varies

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

A favicon is the small square icon that represents your site, often called the tab icon. 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 Windows tile, the admin screens and login page, your RSS and Atom feeds, and, if Google accepts it, next to your listing in search results. One upload covers all of them.

---

Prepare the image first

WordPress asks for one thing: a square image at least 512 × 512 pixels. The cropper always saves the result at exactly 512 × 512, so a smaller upload gets stretched up to that size and looks soft in every place it appears. Beyond that:

• Use a PNG. The WordPress.org favicon documentation names .png as the recommended format, it keeps transparency, and it survives the resizes WordPress performs. JPEG and WebP work but lose transparency.
• Do not use an SVG. In my test install on 7.1.4, get_allowed_mime_types() listed jpg, gif, png, bmp, tiff, webp, avif, ico and heic, but not svg, because an SVG file can carry scripts. Google’s list of favicon formats does not include SVG either. You can add an SVG for browsers later in this guide, as an extra next to the PNG.
• Keep it 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; 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.
• Upload it at exactly 512 × 512 if you can. That is the only size that skips the crop step entirely, so you control the final pixels instead of the cropper.

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 (the script that runs it, wp-admin/js/site-icon.js, is marked @since 6.5.0) so block-theme users, who have no Customizer, could set one without touching a template. It works for classic themes too, and it is now the simplest route on any site.

1. Go to Settings > General and scroll to Site Icon, just below the Tagline field.
2. Click Choose a Site Icon. The media library opens; upload your image or pick one you already have.
3. If the image is exactly 512 × 512, WordPress uses it as is. Any other size, square or not, opens the cropper: adjust the selection and click Crop Image. WordPress saves the crop as a new file with cropped- at the front of its name.
4. Check the preview, which shows the icon in a browser tab and as an app icon, then click Save Changes at the bottom of the page.

Once an icon is set, the button changes to Change Site Icon and a Remove Site Icon button appears next to it. The field only shows for users who can upload files, and it needs JavaScript, so a locked-down admin account or a script blocker can make it look missing.

Method 2: the Customizer (classic themes)

Classic themes still show Appearance > Customize, and the Site Icon has lived in its Site Identity panel since WordPress 4.3. It is the same setting as Method 1, so changing it in one place changes it in the other. Block themes hide the Customize menu unless a plugin brings it back, which is why older tutorials confuse people on newer sites.

Open Appearance > Customize, then Site Identity.

Under Site Icon, click Select image, 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 in 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 the logo image as the Site Icon too. That is handy when the logo already reads well as a small square. If it does not (a wide wordmark, say), 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 keeps the 512-pixel crop, generates five smaller copies from it, and prints four tags from wp_site_icon(). 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	Printed as	Used for
32 × 32	rel="icon" sizes="32x32"	Browser tabs, bookmarks, history, and the /favicon.ico redirect
192 × 192	rel="icon" sizes="192x192"	Android home screen and Chrome
180 × 180	rel="apple-touch-icon"	iOS and iPadOS home screen
270 × 270	msapplication-TileImage	Windows tiles (core’s comment says IE11+)
64 × 64	Not printed	Admin bar site icon and post embeds (2x density)
512 × 512	Not printed	The master crop the others are made from

Those tags go out on three hooks: wp_head at priority 99 for the front end, login_head at 99 for the login screen, and admin_head for the dashboard. Feeds get the icon through rss2_site_icon() and atom_site_icon(). All of it is filterable: site_icon_image_sizes changes which sizes are generated and site_icon_meta_tags edits the printed tags. If a plugin such as Favicon by RealFaviconGenerator prints its own complete set, you can stop WordPress printing a second one:

// 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 );

---

Why /favicon.ico still matters

Browsers, feed readers and crawlers still ask for /favicon.ico at the root of your domain, whatever your page head says. WordPress has answered that request itself since version 5.4, through a function called do_favicon(). When no real file exists at that path, the request reaches WordPress, which sends a 302 redirect:

Situation	What /favicon.ico returns
Site Icon set	302 redirect to your 32 × 32 Site Icon PNG
No Site Icon	302 redirect to wp-includes/images/w-logo-gray-white-bg.png, the grey WordPress W
A real favicon.ico file in the site root	Your web server sends that file and WordPress never sees the request

Two practical consequences. First, if your site shows the WordPress W in a browser tab or feed reader, no Site Icon is set, so fix that rather than uploading an ICO by hand. Second, an old favicon.ico left in the root by a previous theme, host or migration overrides the redirect for anything that requests that path directly. If you see an outdated icon only in some places, look for that file over FTP or your host’s file manager and delete it or replace it.

Developers can hook do_faviconico, which fires just before the redirect, to serve something else.

---

Google’s rules for showing your favicon in search

Google shows favicons next to results, but only when the icon meets its favicon guidelines. Google reads the rel="icon" and rel="apple-touch-icon" tags WordPress prints, so there is nothing extra to add. What matters in practice:

• It must be crawlable. Googlebot has to reach your homepage and Googlebot-Image has to fetch the icon file, so do not block /wp-content/uploads/ or the homepage in robots.txt.
• Size: square and at least 8 × 8 pixels, and Google recommends larger than 48 × 48 so it looks good everywhere. The 192-pixel copy WordPress prints is well above that.
• Format: Google lists BMP, GIF, ICO, PNG, JPEG, PPM and TIFF. SVG is not on the list, the second reason to make your Site Icon a PNG.
• One favicon per hostname. blog.example.com can have its own, but a WordPress install in a subfolder such as example.com/blog/ shows whatever icon the root site at example.com declares.
• Keep the URL stable. Google asks you not to change the favicon URL often, and every new Site Icon gets a new file name, so change it when you mean to.
• It has to represent your brand and cannot be inappropriate; otherwise Google substitutes a default icon.

Updates are slow. Google says crawling “can take anywhere from several days to several weeks.” After a change, run the URL Inspection tool in Search Console on your homepage and request indexing. That is the only lever you have.

---

Should a favicon be SVG or ICO?

Neither, for the Site Icon itself: make it a PNG and let WordPress do the rest. The longer answer:

• ICO is the legacy format behind /favicon.ico. WordPress already redirects that path to your PNG, so you do not need an ICO file. Add one only if some old software you care about insists on a true .ico, and remember it then overrides the redirect.
• SVG favicons work in about 92% of browsers in use according to Can I use, with Safari supporting them from version 26. They scale cleanly and can switch colors for 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 home screens, 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 file:

// 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 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 for this. The file lives in your theme, not the library.

---

Favicon not showing or not updating?

Most of the time the icon is set correctly and something is holding on to the old one. Find your symptom:

Symptom	Likely cause	Fix
New icon shows in a private window but not your normal browser	Browser favicon cache	Hard refresh (Ctrl + F5, or Cmd + Shift + R on a Mac). Some browsers keep favicons until every tab for the site is closed.
Old icon for logged-out visitors, new one when logged in	Page cache or CDN still serving the old head	Purge your caching plugin and CDN. Logged-in users usually bypass the page cache, which is why you see the new one.
WordPress W logo in the tab	No Site Icon set, so /favicon.ico redirects to the W	Set a Site Icon under Settings > General.
Old icon only in feed readers, bookmarks or tools that ask for /favicon.ico	A leftover favicon.ico file in the site root	Delete or replace the file so WordPress can redirect to the current icon.
Two different icons, or the wrong one wins	A theme option or plugin prints its own icon tags	View source and search for rel="icon". Clear the other setting, or use the remove_action snippet above.
Icon looks blurry	Source image smaller than 512 pixels, stretched by the cropper	Export a 512 × 512 (or larger) PNG and set it again.
Cannot upload the file	It is an SVG, or another type WordPress does not allow	Export a PNG.
Site Icon field missing from Settings > General	WordPress older than 6.5, JavaScript blocked, or your role cannot upload files	Update WordPress, try another browser, or use the Customizer on a classic theme.
Google still shows the old icon or a generic globe	Google has not recrawled, or cannot crawl the icon	Check robots.txt, request indexing of the homepage, and wait. It can take weeks.

A note on cache-busting: when you choose a new image, WordPress gives it a new file name, so the HTML already points at a fresh URL. You do not need to add ?v=2 query strings. If the new URL is in the page source and you still see the old icon, the problem is a cache in front of or behind the page, not WordPress.

Removing a site icon

Go to Settings > General, find Site Icon, 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. WordPress stops printing the icon tags, and /favicon.ico goes back to redirecting to the grey W.

---

Frequently asked questions

---

Bottom line

Make a square PNG of at least 512 pixels, set it under Settings > General, and WordPress prints every size browsers, phones and Google need, and points /favicon.ico at it too. Skip SVG for the Site Icon, delete any stray favicon.ico left from an old setup, and if a new icon does not appear, suspect a cache before you suspect the setting.