Favicon not showing up? Find the cause and fix it

Browsers cache favicons far more aggressively than page HTML, and a CDN or service worker in front of the site can keep serving the previous file long after you deployed. Nothing is broken in this case — you are looking at an old copy.

• Open the icon URL in a tab and hard-reload it. If the correct image appears there, the file is fine and you are fighting a cache.
• Add a version to the URL and change it whenever the icon changes: href="/favicon-32x32.png?v=2".
• Purge the icon path in your CDN or reverse proxy, not just the HTML page.

If no icon is declared, browsers fall back to requesting /favicon.ico at the domain root. If one is declared, that exact URL has to work: paths are case-sensitive on Linux servers, and a relative href resolves against the current page, so an icon that works on the home page can 404 on a nested article.

• Request the icon URL directly from the live domain and read the status code.
• Use root-absolute paths (/icons/favicon.png), not relative ones.
• Make sure the build copies the file into the served directory — assets inside src/ are not deployed unless your bundler is told to emit them.

A single 16×16 PNG is the classic setup, and it is the reason icons look soft or vanish on higher-density screens: the browser has to upscale it, and some platform pickers skip an icon whose declared size does not match what they want. Declaring a few sizes lets each consumer choose instead.

<link rel="icon" href="/favicon.ico" sizes="any" />
<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" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

The ICO line covers legacy requests; the PNGs give modern browsers an exact match for the tab; the last two handle iOS and installed apps. For the full breakdown of which surface asks for which size, see every favicon size in one chart.

Safari does not use your tab icon for the home screen. Without rel="apple-touch-icon" at 180×180, iOS falls back to a screenshot of the page, which is why the icon looks nothing like the one you uploaded. Keep it square and opaque: transparency is composited onto a black background, and iOS applies its own corner rounding.

When someone adds the site to their phone, Chrome takes the icon from site.webmanifest. A manifest with no icons, or with only a 32×32 entry, produces a generic or blank icon on the home screen.

• Include 192×192 for the home screen icon and 512×512 for the install screen.
• For a maskable icon, add "purpose": "maskable" and keep the artwork inside the centre 80% — the platform crops the rest into its own shape.

A PNG renamed to .ico is not an ICO, and an ICO that only contains one size is no better than a single PNG. The same applies to a zero-byte upload, an SVG that references external assets, or a server returning the wrong Content-Type — browsers reject what they cannot decode and show nothing.

An icon behind a login, a staging basic-auth prompt, hotlink protection or a Disallow rule in robots.txt is invisible to anyone who is not already signed in — including crawlers. Filter lists are the subtle variant: an icon served from a path matching common ad or tracking patterns gets blocked by extensions and never appears, while the same file loads fine for everyone else.

• Serve icons without authentication, from the same public origin.
• Allow the icon path in robots.txt.
• Avoid icon paths that look like ad or analytics routes.

A correct icon can still be missing from search results, because the crawler re-fetches icons on its own schedule rather than on demand. Google also expects a square icon whose dimensions are a multiple of 48px, and it has to be able to crawl the URL. Beyond that there is nothing to do but keep the URL stable and wait for the next pass.