Favicon Not Showing? 8 Free Fixes, in the Right Order

When a favicon isn't showing, the cause is almost always one of four things: the file isn't where the link tag says it is, the link tag is missing or wrong, the browser is still showing a cached old icon, or (for Google Search) the favicon breaks one of Google's rules or hasn't been recrawled yet. Work through the fixes below in order and you'll find it. If you need a fresh, correctly sized set of files, the free favicon generator makes them with the code to paste.

There are two separate problems people call "favicon not showing": the icon missing in browser tabs, and the icon missing next to your site in Google Search results. Fixes 1-5 are for the browser; 6-8 add Google's requirements.

1. Check the file actually loads

Open the favicon's address directly in your browser, for example https://yoursite.com/favicon.ico. If you see your icon, the file is fine. If you get a "404 Not Found" page, the file isn't there.

Better still, open your page, press F12 to open developer tools, go to the Network tab, and reload. Look for the favicon request. A red 404 tells you the path is wrong; a 200 tells you it loaded.

Common causes of a 404:

• The files are in a subfolder (like /images/) but the link says /favicon.ico.
• The files were never uploaded, or a build step didn't copy them.
• The file name differs in case (Favicon.ico vs favicon.ico); many servers treat these as different files.

2. Put the files in the root folder

Browsers look for /favicon.ico at the top of your site even without a link tag, and most generators assume the root. Put all the favicon files in the main folder of your site, the one that holds your home page. On frameworks like Next.js, Vite or Hugo, that's usually the public or static folder.

3. Check the link tags in the head

The tags must be inside <head>, on every page (or in your shared layout). The free favicon generator gives you this block:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Look for these mistakes:

• Typos in rel, such as rel="favicon", which isn't a valid value. Use icon.
• A relative path without the slash. href="favicon.ico" works on the home page but breaks on /blog/post, where the browser looks for /blog/favicon.ico. Start paths with /.
• An old tag left behind pointing at a deleted file. Remove duplicates so only the current set remains.
• Tags placed in <body> by a theme or plugin. They belong in <head>.

4. Use the right sizes and formats

A favicon is square. A wide logo squeezed into a square looks like a smudge at 16 pixels, and some browsers skip images they can't use. The generator makes favicon.ico (16, 32 and 48 pixels), 16 and 32 pixel PNGs, a 180 pixel Apple touch icon and 192 and 512 pixel icons for Android, all from one square source. Start from a square logo at least 512 × 512 pixels. Our guide to making a favicon has design tips for tiny sizes, and if your logo is an SVG, converting SVG to PNG gives you a square source.

5. Beat the cache

Browsers cache favicons stubbornly, sometimes long after the page itself updates. If the file loads (fix 1) but the tab shows the old icon:

• Hard refresh: Ctrl+Shift+R on Windows and Linux, Cmd+Shift+R on Mac.
• Open the site in a private or incognito window.
• Add a version to the link, such as href="/favicon.ico?v=2", and change it whenever you change the icon.
• Restart the browser. Bookmarks and history keep their own copy of the icon.

If you use a CDN, purge its cache for the favicon files too.

6. Meet Google's favicon rules

For the icon next to your site in Google Search, Google's favicon guidelines add requirements:

• The <link rel="icon"> (or shortcut icon, apple-touch-icon) must be on your home page. Google supports one favicon per site (per hostname), so a section like example.com/blog can't have its own.
• The favicon must be square (1:1) and at least 8 × 8 pixels. Google recommends larger than 48 × 48 so it looks good everywhere.
• Supported formats include ICO, PNG, GIF, JPEG and BMP, among others.
• The favicon URL should be stable; don't change it often.
• The icon should represent your brand, and inappropriate images are replaced with a default icon.

7. Let Google crawl it

Google says Googlebot must be able to crawl your home page and Googlebot-Image must be able to crawl the favicon file. Check that robots.txt doesn't block either one, including image folders. A login wall or a firewall rule that blocks bots will also hide your favicon.

8. Wait, or ask Google to recrawl

Google notes that updating a favicon in search results can take from several days to several weeks after it's recrawled. To speed things up, use the URL Inspection tool in Google Search Console and request indexing of your home page. Even when everything is right, Google doesn't guarantee a favicon will be shown.

Quick checklist

Check	Fix
File returns 404	Upload it to the root folder; match the path and case
No icon on inner pages	Use paths starting with /; put tags in the shared layout
Old icon still showing	Hard refresh, incognito, ?v=2 on the link
Not in Google	Link on home page, square, crawlable, then request indexing

Make a fresh set

If your files are a mix of old sizes and names, start clean. Make a new set with the free favicon generator from letters, an emoji or your logo, put the files in the root folder, and paste the code into <head>. It runs in your browser; nothing is uploaded. For an icon inside an HTML email or a single-file page, the free image to Base64 converter can turn a small PNG into a data URI instead.