Favicon Generator topic guide

Favicon not showing up: troubleshooting checklist

Direct answer

A favicon that does not appear in the browser tab is almost always caused by one of three things: the file path in the link tag does not match the real file location, the HTML head is missing the rel="icon" link tag, or the browser is showing a cached old icon. Walk through this checklist in order - most problems are fixed in the first two steps and the cache check is the last step because a hard reload is the only way to see the new icon.

Try the Favicon Generator

What this workflow handles

The browser fetches a favicon through the link tags in the HTML head, not by guessing where the icon lives on the server. If the page has no rel="icon" link tag the browser falls back to /favicon.ico at the site root, which only works when that file exists and is served with the right MIME type. Even when both are correct the browser may keep the old icon in cache for the session, so the test for "is my new icon actually live?" needs a private window or a cache-cleared browser. MDN's rel="icon" reference, the WHATWG HTML Living Standard link-relation entry and Chrome for Developers' PWA installability docs are the canonical sources for each step.

Use the favicon generator to download every supported size and format in one ZIP, then pick the files your platform or framework actually requires.

How to use it

  1. Open the page in a private / incognito window so the cache is not interfering - the live icon is the only one that matters.
  2. View the HTML source and confirm the link rel="icon" href path resolves to a real file: paste the full href value into the browser address bar and check the file loads.
  3. If there is no rel="icon" link tag, add one with the absolute or root-relative path to favicon.ico (or the PNG you want the browser to use).
  4. Confirm the server serves the file with an image MIME type - browsers reject favicon.ico served as application/octet-stream on some configurations.
  5. Place favicon.ico at the site root as a safety net so the browser's default fallback works even when a link tag is missing.
  6. If the icon still does not update, clear the browser cache or rename the file (favicon.ico?v=2) so the URL changes and the browser is forced to fetch the new file.
  7. For Apple Touch Icon: add rel="apple-touch-icon" with the 180 by 180 PNG path; for PWA install icons: link rel="manifest" to a valid site.webmanifest on a secure origin.

Frequently asked questions

Why is my favicon not showing up in the browser tab?

The most common cause is a mismatch between the file path in the HTML link tag and the real file on the server. Open the page, view source and confirm the link rel="icon" href value resolves to a real file when you load it directly in the browser. The second most common cause is browser cache: open the page in a private window to bypass the cache and see the live icon.

Where should favicon.ico be placed?

At the root of the website - the same path the browser falls back to when no rel="icon" link tag is present, which is /favicon.ico. Static-site generators and many web frameworks expect favicon.ico at the site root by convention. The file must be served with the image/x-icon or image/vnd.microsoft.icon MIME type for the browser to accept it.

Do I need a link tag if I have favicon.ico at the root?

No, but it is recommended. Browsers fall back to /favicon.ico at the site root when no rel="icon" link is present, but an explicit link tag lets you declare the exact path, sizes and MIME type and avoid relying on the fallback. The WHATWG HTML Living Standard documents the rel="icon" link relation that carries the path, sizes and type attribute.

Why does my favicon not update after I replace the file?

Browser cache. Most browsers keep the old favicon in cache for the session and some keep it across sessions. Open the page in a private window or clear the browser cache to see the new icon. The MDN article on rel="icon" calls this out explicitly: browsers may cache favicons aggressively.

Why does my favicon show the old logo even after I cleared cache?

A CDN or reverse proxy in front of the site may be caching the old file with a long TTL. Purge the cache for the favicon path or rename the file to a new URL with a query string version tag (for example favicon.ico?v=2) to force a fresh fetch. Cloudflare and most CDNs cache static assets aggressively.

Why is my Apple Touch Icon or PWA icon not showing up?

Apple Touch Icon needs the rel="apple-touch-icon" link tag with a path to a 180 by 180 PNG; PWA install icons need a valid site.webmanifest with an icons array that the page references via a link rel="manifest" tag. Both also need a secure origin (HTTPS) and the manifest's start_url must resolve. Chrome for Developers' installability docs are the canonical reference for what the browser checks before showing an install icon.

Why is my favicon blurry at small sizes?

Because the source logo was too small or too low-contrast to downscale cleanly to a 16 by 16 browser tab icon. Start from a square logo of at least 512 by 512 with strong contrast and avoid hairline strokes; thin strokes vanish at the 16 by 16 size. The Favicon Generator builds the multi-size favicon.ico from the source you upload, so a sharper source produces a sharper 16 by 16 icon.

Sources

Explore the favicon generator topic cluster

Use the guide that matches your source file or target platform, then generate the complete package in one place.

Related guides

All favicon generator guides