How to add a favicon (site icon) to WordPress

Step by step

1. Prepare the image

Start from a square file, 512×512 pixels or larger, in PNG. Use a simple mark, not your full logo with text: the icon is displayed as small as 16 pixels in a tab, where words are unreadable. Check it at tiny size against both light and dark backgrounds, since browsers and Google show it on either.

2. Upload it

1. Open Settings → General.
2. In the Site Icon row, click Choose a Site Icon.
3. Upload or select the image. If it is not square, WordPress asks you to crop it.
4. Click Save Changes.

Older WordPress versions have the same control under Appearance → Customize → Site Identity, and block themes also let you set the icon from the Site Logo block with Use as Site Icon. All three write the same setting.

3. See what WordPress prints

View the source of any page and look in the head:

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

Core prints a 32-pixel and a 192-pixel icon, a 180-pixel Apple touch icon and a 270-pixel tile image, all cut from your upload. Requests for /favicon.ico are redirected to the 32-pixel icon, so tools that only look there still find it.

4. Check for a competing icon

Some themes print their own <link rel="icon"> from a theme option, and some sites still have a favicon.ico file in the root folder from years ago. Search the head for rel="icon" and rel="shortcut icon". If a tag points somewhere other than the files above, remove it in the theme's settings, or delete the stray file over FTP, so one icon is declared.

5. Make sure Google can use it

Google's favicon guidelines, as documented in Search Central, come down to four points. The homepage must reference the icon with a <link rel="icon"> tag, which WordPress does. The icon must be square, and Google recommends larger than 48×48 pixels. Googlebot must be allowed to crawl both the homepage and the icon file, so do not block /wp-content/uploads/ in robots.txt. And the icon must be appropriate: Google replaces unsuitable ones with a default.

6. Refresh what browsers show

Browsers cache favicons stubbornly. After changing the icon, open the site in a private window to see the new one, or load the icon file's URL directly and refresh it. If the old icon persists for visitors, purge the page cache and CDN, because cached pages still reference the previous files.

7. Wait for Google

Google updates favicons when it recrawls the homepage, which can take from a few days to a few weeks. To prompt it, inspect the homepage URL in Search Console and click Request indexing. There is no separate submission for favicons.

If the icon does not appear in search results

Work through the usual causes. The homepage is noindex or blocked, so Google never reads its head. The icon file is blocked by robots.txt or by hotlink protection that rejects Googlebot. The image is not square. Two different icons are declared and Google picked the other. Or it has simply not been recrawled yet. Google supports one favicon per hostname, so example.com and shop.example.com can differ, but folders under one host cannot.

Changing the icon in code

Developers who need full control can filter the tags core prints:

add_filter( 'site_icon_meta_tags', function ( $tags ) {
    $tags[] = '<link rel="icon" type="image/svg+xml" href="' . esc_url( home_url( '/icon.svg' ) ) . '" />';
    return $tags;
} );

This example adds an SVG icon alongside the generated PNGs. The filter only runs when a Site Icon is set, so upload one first.