Favicon Not Showing? How to Fix It

Published September 17, 2026

You uploaded the file, you added the link tag, you hard-refreshed twice — and the tab still shows a blank page icon, or worse, the logo from two redesigns ago. Favicons fail in a handful of specific ways, and the frustrating part is that the most common one cannot be fixed by refreshing at all.

Work through these in order. The first two solve most cases.

1. The favicon cache is separate — and stubborn

This is the big one. Chrome, Edge and Firefox store favicons in their own database, apart from the normal page cache. Pressing Ctrl+Shift+R reloads your HTML, CSS and images, and leaves the old icon completely untouched. People conclude the upload failed, re-upload, refresh again, and go round in circles.

Three ways out, in increasing order of force:

1. Open the icon file directly. Type the icon URL into the address bar — https://yoursite.com/favicon-32.png — and reload that tab. You are now viewing the image as a page, so a refresh fetches a fresh copy and the stored favicon is replaced. This works surprisingly often and takes five seconds.
2. Add a version string. Change the link tag to href="/favicon-32.png?v=2". As far as the browser is concerned that is a different URL, so it must fetch it. This is the only method that also fixes it for visitors, who are not going to clear anything for you. Bump the number on every icon change.
3. Test in a private window. Not a fix, but a fast diagnosis. If the new icon appears in a private or incognito window, the file and markup are correct and you are purely fighting your own cache — stop editing code.

Safari is the most stubborn of the lot and sometimes needs a full quit and relaunch, not just a new tab.

2. The path is wrong

The second most common cause, and it hides well because the page still loads fine.

Use a root-relative path that starts with a slash: href="/favicon-32.png". Without the leading slash, href="favicon-32.png" is resolved relative to the current page, so it works on your home page and silently breaks on /blog/some-post/, where the browser looks for an icon that is not there.

To check, open your live site, open the developer tools Network tab, and reload. Filter for “favicon”. You want a 200. A 404 means the path or filename is wrong — watch for capitalisation, since most web servers treat Favicon.PNG and favicon.png as different files even though Windows does not.

3. A leftover favicon.ico is winning

Browsers request /favicon.ico from your site root automatically, whether or not you ever mentioned it. If an old one is still sitting there from a previous theme, some browsers will keep showing it, or flicker between old and new.

When you redesign, delete the old favicon.ico, or replace it with the new artwork. WordPress themes, static site generators and hosting templates all like to drop one in without telling you. Visit yoursite.com/favicon.ico directly — if an old logo appears, you have found your ghost.

4. It works on desktop but not on the phone

This is not a bug, it is a missing size. Phones do not use the tab favicon for home screen shortcuts:

• iPhone and iPad read <link rel="apple-touch-icon"> and want a 180×180 PNG. With no such tag, iOS may use a shrunken screenshot of the page instead.
• Android reads the web app manifest and wants 192×192 and 512×512.

Also remember that iOS composites transparency onto black. A dark logo on a transparent background gives you a black square that looks exactly like a broken icon but is not. Give the Apple icon a solid background. There is more on this in our apple-touch-icon guide.

5. The file format is not what you think

A PNG renamed to .ico is still a PNG. Some browsers cope, others quietly refuse, which produces the maddening “works in Chrome, blank in Safari” pattern. So does an SVG saved with an external font reference, or an image your editor wrote as CMYK.

The safe combination in 2026: PNG files, correctly sized, declared with explicit sizes attributes. If you are not certain what your file really is, regenerate it from your source artwork with the Favicon Generator rather than renaming anything.

6. It is there, but it looks like a grey smudge

If an icon appears but is unrecognisable, the problem is resolution, not caching. A browser given only a 512×512 file will downscale it to 16 pixels, and at that size a wordmark or detailed illustration has nothing left to see. Ship a real 16×16 and 32×32, and simplify the artwork — one letter or one bold shape, high contrast. Full breakdown in favicon sizes.

7. Missing in Google Search results

The favicon beside your search result is a separate system with its own rules:

• The icon must be square and a multiple of 48 px (48, 96, 144…), minimum 8×8.
• It must be referenced from your site’s home page, not only from inner pages.
• The file must be crawlable — not blocked in robots.txt, and returning a 200 rather than a redirect.

Even with all of that correct, Google updates search favicons on its own schedule: it has to recrawl your home page first, and the icon can take days or weeks to change. Google also reserves the right not to show one. Fix the technical side, then wait rather than keep changing files.

A quick checklist

Is the generator private and free?

Yes. The Toolyard Favicon Generator resizes your artwork with the browser’s own canvas, so the image is never uploaded to a server. It produces 16, 32, 48, 64, 180, 192 and 512 px PNGs plus the matching <link> tags, with no sign-up and no watermark.