Favicon not showing? 10 fixes for Chrome, Safari & Google
You uploaded a new favicon, but the browser still shows the old one — or nothing at all. Work through this checklist from top to bottom; the first three items solve most cases.
1. Clear the favicon cache
Browsers cache favicons separately from the page, sometimes for weeks. Hard-reload (Ctrl+Shift+R / Cmd+Shift+R), then open the icon URL directly and reload it too. In Chrome you can also test in a new Incognito window. As a last resort, add a version query: href="/favicon.ico?v=2".
2. Open the icon URL directly
Visit https://your-site.com/favicon.ico (and each PNG). If you get a 404 or your HTML page, the file is not where the tag says. Common causes: the file was not copied to the build output, a sub-path deployment (e.g. GitHub Pages project sites), or case-sensitive file names on Linux servers (Favicon.ico ≠ favicon.ico).
3. Check the HTML tags
- Tags must be inside
<head>, not<body>. - Check for typos:
rel="icon", notrel="favicon". - Remove old or duplicate icon tags added by themes or plugins — the browser may prefer them.
- Make sure
typematches the file (image/png,image/svg+xml,image/x-icon).
4. Is the file a real ICO?
A PNG renamed to .ico works in some browsers but not others. Drop your file into the ICO Viewer: it shows the real format and every size inside. If it is invalid, recreate it with Image to ICO.
5. Server MIME type and redirects
- Serve .ico as
image/x-icon(orimage/vnd.microsoft.icon) and .svg asimage/svg+xml. - Avoid redirect chains for the icon; serve it directly over HTTPS.
- Make sure the icon is not behind a login or a bot-protection challenge.
6. SVG favicon quirks
Safari does not use SVG favicons for tabs, and some browsers ignore SVGs that rely on external fonts or CSS. Always provide an ICO or PNG fallback next to the SVG.
7. Google Search shows the wrong icon
- The icon must be a multiple of 48 px or an SVG, and both the icon and home page must be crawlable (check
robots.txtforDisallowrules that block it). - Put the
<link rel="icon">on the home page of the domain or subdomain. - Request re-indexing of the home page in Google Search Console. Updates can take several days to weeks.
8. Mobile home-screen icons
iOS uses the Apple touch icon and Android uses the manifest icons, not favicon.ico. Remove and re-add the home-screen shortcut after changes.
9. Windows shortcuts and pinned sites
Desktop shortcuts created from a browser copy the icon at creation time. Delete and recreate them, or refresh the Windows icon cache as described in this guide.
10. Content Security Policy
If your site sends a strict Content-Security-Policy header, make sure img-src allows the origin that serves the icon (usually 'self').
FAQ
How long does it take for a new favicon to appear?
In your own browser, immediately after clearing the cache. In Google Search, it can take days or weeks after Google recrawls your home page.
Why does my favicon work locally but not online?
Usually the file was not deployed, the path differs on the server (sub-path or case sensitivity), or the server sends the wrong content type.