A missing or broken favicon is one of the most common questions on Stack Overflow — and the answer is almost always one of ten things. Work through this checklist top to bottom and you'll find it.
1. Browser caching (the #1 cause)
Browsers cache favicons extremely aggressively — far more than regular pages. Even after you've fixed the issue, the old (broken) icon can persist for days. Test in this order:
- Hard refresh: Ctrl/Cmd + Shift + R
- Incognito / private window — if it shows there, it's just your cache
- Visit the file directly: open
https://yourdomain.com/favicon.ico. If you see the image, the file is fine and it's a cache/link issue. - Clear the favicon cache: in Chrome, open
chrome://favicon/won't work anymore, so use an incognito window or a different browser.
2. Wrong file path
The href in your <link> must point to where the file actually is. A leading slash (/favicon.ico) means site root. If your site is served from a subfolder, the path must reflect that.
<!-- ❌ wrong if file is in /assets/ -->
<link rel="icon" href="favicon.ico">
<!-- ✅ absolute path from site root -->
<link rel="icon" href="/favicon.ico">
<!-- ✅ or the real location -->
<link rel="icon" href="/assets/favicon.ico">3. Missing <link> tag
Some browsers fall back to /favicon.ico automatically, but you should never rely on that. Always declare icons explicitly in <head>:
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />4. Wrong MIME type
If your server serves .ico as image/png (or vice versa) some browsers will refuse to render it. .ico should be image/x-icon or image/vnd.microsoft.icon; PNG should be image/png.
5. File not deployed
It sounds obvious, but check that the file actually made it to production. Open the file URL in a new tab. A 404 means it's not there — rebuild and redeploy, and confirm your build pipeline copies favicons into the output directory.
6. Non-square source image
Favicons must be square. If your source image isn't 1:1, browsers may show a stretched or blank icon. Crop first. The Favicon.one generator enforces square output.
7. Framework-specific gotchas
Next.js App Router
Icon files go in app/ (not public/) for auto-detection. See our Next.js favicon guide.
Next.js Pages Router
Files go in public/, tags go in pages/_document.tsx.
Webpack / Vite
Make sure favicon.ico is in your public/ or static/ directory and referenced in your HTML template.
8. HTTPS / mixed content
If your site is HTTPS but the favicon is referenced over HTTP, browsers will block it as mixed content. Always use HTTPS URLs or relative paths.
9. Service worker caching an old version
If you have a PWA with a service worker, it may be serving a cached HTML that references an old favicon. Update and re-register the service worker.
10. The SVG favicon isn't supported
SVG favicons aren't supported in every browser (notably older Chrome on Android). Always provide a PNG/ICO fallback alongside an SVG.
Still stuck? Run the Favicon Checker
Paste your URL into the Favicon Checker and it will tell you exactly which icons and tags are missing or broken — no guessing.
Need a clean favicon package to replace a broken one? Generate one free at Favicon.one.