Favicon not showing? Here’s why
Nine times out of ten it’s the browser cache. The rest are wrong paths, files that never got deployed, or a server answering with a web page. Paste your <head> below for an instant check, or run the favicon checker on your live URL.
The instant check runs in your browser as you paste. Nothing is sent until you ask the AI.
Force a fresh favicon
- Change every icon href to add a version:
/favicon.svg?v=2. - Open
/favicon.icoin its own tab and hard-refresh (Ctrl+Shift+R / ⌘+Shift+R). - Reload your page. Still old? Try a private window.
- Safari on Mac: quit, delete
~/Library/Safari/Favicon Cache, reopen. - iPhone home screen icons are cached per shortcut: remove the shortcut and add it again.
The nine usual suspects
It’s the cache
Browsers keep favicons far longer than pages. Open the icon URL directly and hard-refresh it, test in a private window, or append ?v=2 to every icon href to force a new download.
The path is wrong
Open each href from your link tags in a new tab. A relative href like "favicon.ico" breaks on /blog/post pages; use "/favicon.ico".
The file is missing in production
Frameworks only ship files from their public or static folder. Check the deployed URL returns the image, not a 404.
The server returns HTML
Single-page-app fallbacks answer every unknown path with index.html and status 200. The checker flags this as “HTML page instead of an image”.
The tag isn’t in <head>
Link tags placed in <body>, or only in one template, won’t be seen on other pages.
The file isn’t a real icon
Renaming logo.png to favicon.ico doesn’t convert it (though most browsers cope). Use a real converter such as PNG to ICO.
Wrong MIME type
Very old servers send .ico as text/plain or .svg as application/octet-stream. Serve image/x-icon and image/svg+xml.
You opened the file locally
Pages opened as file:// often show no favicon at all. Test on a local server or the live site.
Google hasn’t recrawled
Search results use Google’s cached icon. It must be a multiple of 48 px or SVG, linked from the home page. Allow weeks.
If the files themselves are the problem, rebuild them cleanly with the favicon generator and follow how to add a favicon.
Questions people ask
Why is my favicon not showing?
The five usual causes: the browser is showing a cached old icon; the file is not actually at the URL in your link tag (404 or an HTML fallback page); the link tag is not inside <head> or is on some pages only; the file is not a real image (for example a renamed JPG or an empty file); or the site is opened as a local file, which some browsers never show favicons for.
How do I clear the favicon cache in Chrome?
Open the icon URL directly (for example https://your-site.com/favicon.ico) and press Ctrl+Shift+R or Cmd+Shift+R, then reload your page. If that fails, add a version query to your link tags (href="/favicon.svg?v=2") or test in an Incognito window. Chrome also keeps favicons in a “Favicons” database in the profile folder, which is cleared with “Cached images and files” for “All time”.
How do I clear the favicon cache in Safari?
Safari caches favicons aggressively. Quit Safari, delete the folder ~/Library/Safari/Favicon Cache, and reopen. On iPhone, clear website data for that site in Settings → Safari → Advanced → Website Data.
Why does Google show a globe instead of my favicon?
Google only shows a favicon it has crawled from your home page. It must be linked with rel="icon", be square and a multiple of 48 px (or SVG), and not be blocked by robots.txt. Updates can take several weeks.
My favicon works locally but not in production. Why?
Usually the file is not copied to the build output (put it in the framework’s public folder), the path is relative and breaks on nested pages (use a leading slash: /favicon.ico), or a CDN is caching a 404 from before the file existed.