You shipped a new favicon. Your browser tab still shows the old one, Google shows a grey globe, and the icon on your phone's home screen is a blurry screenshot of your page. Favicons are tiny, but they fail in more places than almost any other asset, because several different systems fetch and cache them independently.
I build favicon.now, a favicon generator and checker, and most "it's broken" reports we see come down to the same handful of causes. This is the checklist I work through, roughly in order from most to least likely.
Part 1: The files themselves
1. Open every icon URL directly. Paste https://yoursite.com/favicon.ico, your PNG icons, your apple-touch-icon.png and your site.webmanifest into the address bar. Each should return HTTP 200 and the right content. A surprising number of "invisible" favicons are simply 404s, or a redirect to a login page.
2. Check the content type. Your server should send image/x-icon or image/vnd.microsoft.icon for ICO, image/png for PNG, image/svg+xml for SVG, and application/manifest+json for the manifest. Some servers send SVG as text/plain or application/octet-stream, and browsers may refuse to use it.
3. Make sure the file is what its extension says. A PNG renamed to .ico sometimes works and sometimes does not. A real ICO file contains one or more embedded frames; inspect it and confirm it actually has the sizes you expect, such as 16, 32 and 48 pixels.
4. Keep SVG favicons self-contained. An SVG favicon that references external fonts, images or stylesheets may render blank. Inline everything, keep it simple, and always pair it with a PNG or ICO fallback.
Part 2: The HTML
5. Inspect the rendered head, not the template. Frameworks, CMS plugins and theme files often inject their own <link rel="icon"> tags. View the final page source or use dev tools and look for duplicate or conflicting declarations. The browser will pick one, and it may not be yours.
6. Use root-relative paths. href="favicon.png" works on the homepage and breaks on /blog/post-1/, where the browser looks for /blog/post-1/favicon.png. Use href="/favicon.png" instead.
7. Declare sizes and types honestly. A minimal, modern set looks like this:
<link rel="icon" href="/favicon.svg" type="image/svg+xml" sizes="any">
<link rel="icon" href="/favicon-48x48.png" type="image/png" sizes="48x48">
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="/site.webmanifest">
If the sizes attribute says 32x32 and the file is 512x512, some clients will skip or mis-scale it.
8. Keep /favicon.ico at the root anyway. Some clients request /favicon.ico directly without reading your HTML. Having a valid file there is cheap insurance.
Part 3: Caching
9. Assume the browser is lying to you. Browsers cache favicons aggressively and separately from the page. A normal reload often will not refresh it. Try a private window, open the icon URL directly and hard-refresh it, or test in a browser you have not used on the site.
10. Version the URL when you change the icon. Changing /favicon.svg to /favicon.svg?v=2 in your HTML forces clients that read the HTML to fetch a fresh copy.
11. Purge your CDN. If your site sits behind a CDN with long cache lifetimes on static files, the old icon can keep being served even after you deploy. Purge the icon paths explicitly.
Part 4: Google Search
Google's favicon in search results is fetched by its own crawler on its own schedule, so it is the slowest to update.
12. Meet the basic requirements. Google's documentation asks for a square icon (1:1), at least 8x8 pixels, with a recommendation to go larger than 48x48. It should be declared with a <link rel="icon"> tag on the homepage, and the icon URL should be stable.
13. Make sure Google can crawl it. Check that robots.txt does not block the icon file or the homepage. Both Googlebot and Googlebot-Image need access.
14. Wait. After fixing everything, it can take days or weeks for the icon in search results to change. Requesting a recrawl of your homepage in Search Console can help, but there is no instant switch.
Part 5: Home screens and installed apps
15. Provide a real Apple touch icon. iOS uses apple-touch-icon (180x180) for "Add to Home Screen". Without it, you may get a screenshot or a generic letter tile.
16. Validate the manifest. For Android and installable PWAs, the manifest should list at least 192x192 and 512x512 icons. Use separate entries for "purpose": "any" and "purpose": "maskable" rather than one image marked "any maskable", because a maskable icon needs extra padding that looks wrong when shown unmasked.
17. Respect the maskable safe zone. Android may crop maskable icons into circles, squircles or other shapes. Keep essential artwork inside the central safe area or your logo loses its edges.
18. Reinstall to test. Home screen icons are captured at install time. To see a new icon, remove the shortcut or app and add it again.
Part 6: Does it actually look right?
19. Check contrast on light and dark browser chrome. A transparent black logo disappears on a dark tab bar. A transparent white one vanishes on a light one. Either add a background shape or test both modes.
20. Judge it at 16 pixels. A design that looks great at 512 pixels may turn into mush in a tab. Simplify until it survives the smallest size.
How I run this checklist
Most of these checks are things you can do with dev tools and curl. To make it faster, we built the inspection side of favicon.now around this list: a live site checker, a Google favicon checker, an ICO inspector that shows every embedded frame, a manifest validator, a contrast checker, and an HTML code generator that writes the head tags. When the files themselves are the problem, the generator produces the full package (SVG, multi-size ICO, PNG fallbacks, Apple touch icon, ordinary and maskable PWA icons, manifest and HTML) in one ZIP.
If you are stuck on a favicon that will not update, you can check your live site on favicon.now for free without an account. Then work down this list until the tab, the search result and the home screen all agree.
Top comments (0)