Why Isn't My Favicon Showing Up? 9 Common Causes and Fixes
The nine most common reasons a favicon refuses to appear, in the order you should actually check them.
· 5 min read
Quick answer: a missing favicon is almost always one of nine things — browser cache, a broken or missing <link> tag, a 404 on the actual file, a wrong MIME type, JS-only injection, CDN/edge caching, a stale service worker, a bad relative path, or a corrupted file — and checking them in that order finds the culprit fastest.
A favicon that won't show up is rarely a mystery once you know where to look. The problem is that most of the nine causes below look identical from the outside — the icon just isn't there — so people tend to guess randomly instead of working through them in order. This list is sorted roughly by how likely each cause is and how cheap it is to rule out, so start at the top.
1. Your browser is showing a stale cached icon
This is the single most common false alarm. Browsers cache favicons aggressively, sometimes independently of the caching rules that apply to the rest of the page, and sometimes per browser profile rather than per tab. You update the file, reload, and see the old icon anyway — not because anything is broken, but because your browser hasn't asked for a new one yet.
Fix: hard refresh with Cmd/Ctrl+Shift+R, or open the site in a private/incognito window. If the new icon shows up there, the deployment is fine and it's purely a caching issue — see our full guide to busting favicon cache for the permanent fix.
2. The <link rel="icon"> tag is missing or malformed
If there's no icon <link> tag in your <head> at all, most browsers fall back to requesting /favicon.ico at the domain root — which may or may not exist. If a tag is present but has a typo in the href, a missing closing quote, or the wrong rel value, browsers will often just silently ignore it rather than error loudly.
Fix: view page source (not devtools' rendered DOM — actual source) and confirm the tag looks like <link rel="icon" href="/favicon.png" type="image/png"> with a valid, reachable path. Our HTML favicon tag guide covers every tag variant you might need.
3. The file genuinely isn't at that path (404)
The tag can be perfect and the file can still not exist where it points. This happens constantly with case-sensitive Linux hosting: Favicon.ico and favicon.ico are different files on Linux, even though they look identical on macOS or Windows where you tested locally.
Fix: open the icon URL directly in a browser tab. A 404 page instead of an image means the deploy didn't include the file, or the case doesn't match exactly.
4. The server sends the wrong MIME type
Some hosts and misconfigured static file servers serve .ico or .svg files with an incorrect Content-Type header — for example, text/plain or application/octet-stream instead of image/x-icon or image/svg+xml. Some browsers quietly refuse to render an icon whose declared type doesn't match what they expect, without any visible error.
Fix: check the response headers for the icon request in your browser's network tab. If the MIME type looks wrong, it's a server/hosting configuration fix, not a file problem.
5. The icon is set by JavaScript after the page loads
If your icon <link> tag is injected client-side — say, by a JS framework that manipulates document.head after mount — it can flash in late on a slow connection, or fail to appear at all in contexts that don't execute JavaScript. Link preview generators for chat apps and social platforms are a common example: they often just parse the initial HTML and never run your JS.
Fix: make sure the icon tag is present in the server-rendered or static HTML response itself, not only added after hydration.
6. A CDN or reverse proxy is caching an old version at the edge
Even if your origin server has the new file, a CDN sitting in front of it can keep serving a cached copy until its edge cache expires or is purged. This is a distinct layer from browser caching, and it affects every visitor, not just you.
Fix: purge the specific icon path in your CDN dashboard, or check whether your CDN respects cache-busting query strings (covered in the cache-busting guide).
7. A service worker is serving a cached asset
Progressive web apps and any site with an active service worker can have icons cached as part of an install/precache step. If the service worker was registered before you last changed the icon, visitors who already have it installed may keep seeing the old asset until the service worker itself updates and its cache is invalidated.
Fix: in devtools' Application tab, unregister the service worker and clear its cache storage, then reload to confirm the new icon appears. If it does, the fix in production is to bump your service worker's cache version so it doesn't rely on end users clearing anything manually.
8. Relative path breaks under a subdirectory or CMS rewrite
A favicon <link> with a relative path like href="favicon.png" resolves relative to the current page's URL, not the site root. That works fine on a homepage at / but breaks the moment the same template renders on a page at /blog/post-name/, where the relative path now points somewhere that doesn't exist. CMS platforms that rewrite URLs can trigger this even when your template looks unchanged.
Fix: always use an absolute path starting with /, like href="/favicon.png", so it resolves the same way regardless of which page renders it.
9. The file itself is corrupted or zero bytes
Occasionally the file is at the right path, with the right MIME type, and still won't render — because the upload failed partway through and left a truncated or empty file. This is easy to miss because the file appears to "exist" in a file browser.
Fix: download the file directly and confirm it opens as a valid image. A zero-byte or corrupted file needs to be re-exported and re-uploaded, not just re-linked.
The fastest way to find out which one it is
Working through nine possibilities by hand is slow. Running the favicon checker against a live URL shows you exactly what's declared in the HTML, whether each declared icon actually loads, what size and type it reports, and whether the /favicon.ico fallback resolves — which narrows a "why isn't this showing up" question down to one specific cause in seconds instead of a guessing game.
◎ Try the Checker
Point it at a URL and get a graded report of every icon a site declares — plus how each one looks on real devices.
Open Checker