---
title: Favicon Not Showing or Updating? 9 Causes & Fixes
description: Favicon not showing or not updating? The top causes (browser cache, wrong path, missing tags) and exact fixes, plus a free favicon checker.
canonical: https://favicontools.com/blog/favicon-not-showing
---
# Favicon Not Showing or Updating? 9 Causes & Fixes
The nine causes that break favicons, and the exact fix for each. Nine times out of ten it is caching, so start there and work down the table.
> **Fastest fix:** 90% of the time it's caching. Add a version query string and hard-refresh. Still broken? Work through the causes below, then scan your site to confirm.
```markup
```
Changing the URL is what makes the browser fetch a new file. Editing the ICO in place is not enough.
## Causes & fixes
| Cause | Why it breaks | Fix |
| --- | --- | --- |
| 1. Browser or CDN caching | Browsers cache favicons harder than almost any other asset, and a CDN in front adds a second layer. | Hard-refresh (Cmd+Shift+R / Ctrl+F5) and append a version query string so the URL itself changes. |
| 2. Wrong file path | A relative path resolves against the current page, not the root. | Use a leading slash, /favicon.ico, and confirm the file actually loads at that URL in a new tab. |
| 3. Missing or malformed link tags | No icon link, a typo in rel="icon", or tags placed outside the all prevent the browser from finding the file. | Validate the markup in your shared layout. |
| 4. Wrong format or size | A favicon that's too small, the wrong MIME type, or a corrupt .ico can silently fail to render. | Re-export at a supported size and format, and serve it with the right content type. Compare ICO vs PNG and check the required favicon sizes. |
| 5. Apple touch icon not updating | iOS ignores favicon.ico and uses the apple-touch-icon. If it's missing or stale, the home screen shows the wrong thing. | Fix the apple-touch-icon link, then remove and re-add the page to the home screen. |
| 6. Manifest icon issues | On Android and installed PWAs the icon comes from manifest.json. A bad path or wrong size there breaks the home-screen and splash icons. | Correct the icon paths and sizes in manifest.json, then reinstall the app. |
| 7. Build output strips your tags | Some frameworks rewrite the document head, so hand-written link tags don't survive the build. | Follow the guide for your stack: Next.js, React, WordPress, or Shopify. |
| 8. A theme or CMS injects its own icon | A theme can set its own site icon, which overrides the one you added in markup. | Set the icon through the platform's own site-icon setting rather than in the template. |
| 9. A build cache serves a stale file | The build or platform cache keeps handing out the old icon even after you redeploy. | Purge the build/platform cache, redeploy, and re-check. |
## Where to look next
Format or size suspect? Compare ICO vs PNG in the glossary and check the required favicon sizes. iOS trouble? Read the apple-touch-icon entry. Manifest trouble? Read what is manifest.json.
Causes 7 through 9 are the platform-specific ones: some frameworks and CMSs overwrite or cache the favicon in ways plain HTML doesn't. Build output can strip your tags, a theme can inject its own icon, or a build cache can serve a stale file. The Next.js, React, WordPress, and Shopify guides each cover their own version of this.
## How to clear a cached favicon
1. **Append a version query string** — Change the link href to /favicon.ico?v=2 so the browser fetches a fresh file.
2. **Hard-refresh the page** — Use Cmd+Shift+R (macOS) or Ctrl+F5 (Windows) to bypass the cache.
3. **Purge any CDN cache** — If a CDN sits in front of your site, invalidate the favicon path so edge nodes serve the new file.
## Cleared the cache and it's still the same?
| What you see | What it usually means | Next move |
| --- | --- | --- |
| 404: favicon not found | The browser asked for /favicon.ico and the server had nothing there. Common straight after a framework build that never copied the file into the output. | Open /favicon.ico directly. If it 404s, the file isn't deployed. This is a build or path problem, not a cache one, so fixing the cache will never help. |
| The old icon still loads at the direct URL | Opening /favicon.ico shows the OLD image, so the file itself is stale. No amount of hard-refreshing will move it. | A build step or CDN is handing out an old file. Purge the platform/CDN cache, redeploy, then re-open the direct URL before checking the tab. |
| Right file at the URL, wrong icon in the tab | The direct URL is correct but the tab is still wrong. A second link tag (a theme's, a plugin's, or a framework default) is out-ranking yours. | View source and count the rel="icon" tags. The browser takes the last one it understands, so remove the loser rather than adding a third. |
| Fine in one browser, missing in another | Each browser, and each Chrome profile, keeps its own favicon store, and some hold a stale entry for days. | Confirm in a fresh private window or a clean profile before deciding the site is at fault. |
Work that table top to bottom. Each row rules out one layer, so you stop guessing about the cache and start reading what the server actually returns.
## Sizes the failing cases care about
- 16x16
- 32x32
- 48x48
- 96x96
- 180x180
Rendered at true pixel dimensions. Google wants at least 48×48 before it will show an icon in search, and iOS wants a 180×180 apple-touch-icon. An icon that only exists at 16px fails both.
## Confirm the fix with a scan
Guessing is slow. Run an automated scan that fetches your live site, lists every favicon tag it finds, and flags the ones that are missing or broken, so you know the fix actually landed.
Want to test manually across browsers and devices too? See how to test & check your favicon.
## Frequently asked questions
### Why is my favicon not showing?
The most common causes are aggressive browser caching, a wrong or relative file path, and missing or malformed tags in the . Hard-refresh, confirm /favicon.ico resolves directly, and check your tags.
### How do I force my favicon to update?
Append a version query string to the icon URL, e.g. /favicon.ico?v=2. This makes the browser treat it as a new file. Then hard-refresh or clear the site's cache.
### Why does my favicon show on desktop but not on iPhone?
iOS uses the apple-touch-icon, not favicon.ico. If that 180×180 PNG link is missing, iOS falls back to a screenshot. Add an apple-touch-icon link and re-add the page to the home screen.
### How long does it take for a favicon to update in Google search?
Google refreshes favicons when it recrawls your site, which can take days to weeks. Ensure the icon is at least 48×48, referenced with a valid rel=icon tag, and reachable by Googlebot.
### Why does it say favicon not found, or return a 404?
The browser requested the icon by path and the server had nothing there. Open /favicon.ico directly in a new tab: if it 404s, the file was never deployed to that URL, usually a framework build that didn't copy it into the output, or a wrong path in the link tag. Fix where the file lands, not the cache.
### My favicon is missing: where should the file actually be?
For the classic tab icon, a real file at the site root so /favicon.ico resolves. Frameworks change how it gets there: Next.js reads app/favicon.ico, Vite and most SPAs copy public/ to the root, and WordPress or Shopify serve it through a site-icon setting instead of a file. If the tag points somewhere the build never wrote a file, the icon is 'missing' even though your source looks correct.
### I tried clearing the cache and it's still the same. Now what?
Stop clearing caches and read what the server returns. Open /favicon.ico directly: a 404 means a build or path problem, an old image means a stale build or CDN file, and the correct file with the wrong icon in the tab means a second link tag is winning. Each outcome points at a different fix. See the escalation table above.
> **Check your favicon now:** Scan your live site for missing or broken favicon tags, free.