Your favicon is not showing when the browser cannot find a valid icon file at the URL your HTML declares, when tags are missing from server-rendered <head>, or when a cached placeholder replaces the real file. The fix is almost always a wrong path, a missing link rel="icon" tag, or icons injected too late by JavaScript.
This guide walks through every common cause in order. Scan your live URL with Favicon Check after each fix to confirm the icon is detected before you close the tab.
Quick diagnosis
| Symptom | Likely cause |
|---|---|
| Generic globe or blank tab | No icon found at declared URL or /favicon.ico |
| Icon on homepage only | Relative path breaks on nested routes |
| Icon in one browser, not another | Missing apple-touch-icon vs rel="icon" confusion |
| Icon in DevTools but not tab | Client-side injected tags, not in view-source |
| Icon after hard refresh only | Browser cache or CDN stale file |
Start with view-source on the broken page, not the Elements panel. Crawlers and first paint use the raw HTML.
Step 1: Confirm tags exist in server HTML
Open View Page Source on the exact URL where the favicon fails. Search for rel="icon" and favicon.ico.
You should see something like:
<link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">If nothing appears, the browser falls back to requesting /favicon.ico at the domain root. If that file is also missing, you get a generic icon.
JavaScript-only favicons fail
SPAs that add <link rel="icon"> after React or Vue mounts often look fine in DevTools Elements. The tab icon loaded before the script ran. Put favicon tags in your server-rendered index.html or layout template.
Frameworks like Next.js should use app/layout.tsx metadata or static files in app/. See How to Add a Favicon to Your Website for copy-paste HTML.
Step 2: Fix broken file paths
The top cause of a missing favicon is a href that does not resolve on every route.
Wrong: relative paths on nested pages
<link rel="icon" href="favicon.ico">On https://example.com/blog/my-post, the browser requests https://example.com/blog/favicon.ico. File not found.
Right: root-relative paths
<link rel="icon" href="/favicon.ico">Root-relative paths start at the domain root regardless of page depth.
CDN and absolute URLs
If icons live on a CDN, use a full HTTPS URL:
<link rel="icon" type="image/png" sizes="32x32" href="https://cdn.example.com/favicon-32x32.png">Test a deep URL, not only the homepage. Paste https://yoursite.com/some/nested/page into Favicon Check. If icons appear for the homepage but not nested routes, your paths are almost certainly relative.
Step 3: Verify favicon.ico at the site root
Browsers request this automatically:
https://yourdomain.com/favicon.ico
Open that URL directly in a new tab. You should see the image or download a file. A 404 here means many browsers show no custom icon even if PNG link tags exist.
Upload favicon.ico to your web root or configure your host to serve it. The Favicon Check probes /favicon.ico when it is not declared in HTML.
Step 4: Check HTTPS and mixed content
Pages served over HTTPS cannot load favicons over HTTP. Mixed content gets blocked.
Wrong:
<link rel="icon" href="http://example.com/favicon.ico">Every icon URL must use https:// in production. If you use a staging domain with HTTP only, test on production before concluding the favicon is broken.
Step 5: Confirm the file is publicly reachable
Icons behind authentication fail for anonymous visitors and audit tools.
Open the icon URL in an incognito window. Common blockers:
- Login walls on staging environments
robots.txtdoes not block favicons usually, but firewall rules can- Hotlink protection on CDNs rejecting non-browser referrers
- Wrong MIME type causing silent failures in strict clients
The Favicon Check fetches as a crawler. If it lists your icon with a preview thumbnail, the file is reachable.
Step 6: Rule out browser cache
Browsers cache favicons aggressively. You fixed the file but still see the old globe or an outdated logo.
Try:
- Hard refresh:
Cmd+Shift+R(Mac) orCtrl+Shift+R(Windows) - Private or incognito window
- Different browser you have not used for that site
- Rename the file (
favicon-v2.ico) and updatehref
Cache is a common reason people think the favicon is "not showing" after a deploy when it works for new visitors. We cover cache in depth in the upcoming favicon cache article. For a quick retest, incognito is enough.
Step 7: Check MIME types and server config
Servers should return sensible Content-Type headers:
| File | Expected type |
|---|---|
.ico | image/x-icon or image/vnd.microsoft.icon |
.png | image/png |
.svg | image/svg+xml |
Wrong types rarely block all browsers but can break validators and some enterprise proxies. Check response headers in Network tab when loading the icon URL.
Platform-specific notes
Chrome and Firefox (desktop)
Use rel="icon" with PNG or ICO. Optional SVG with PNG fallback. Sizes 16×16 and 32×32 cover most tab bars. See the Favicon Sizes Guide for the full set.
Safari (macOS)
Same rel="icon" tags. Pinned tabs need rel="mask-icon" separately. A missing mask icon does not remove the tab favicon.
Safari (iOS)
Home screen icons use apple-touch-icon, not rel="icon". A working tab icon can still show a generic tile on iOS if apple-touch-icon is missing. That is a different symptom but worth checking while you are auditing.
Android / PWA
Launcher icons come from manifest.json. Missing manifest icons do not always break the browser tab icon but break install prompts. Link your manifest:
<link rel="manifest" href="/site.webmanifest">Common mistakes that hide your favicon
Only uploading to /assets/ without updating tags
The file exists on the server but HTML still points at /favicon.ico from three years ago.
Deploying to a subpath without adjusting base URL
Sites at example.com/app/ sometimes need absolute paths or a <base href>. Test the exact production URL structure.
Forgetting apple-touch-icon is separate
Tab icon works, user says "favicon not showing on iPhone." Add:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Duplicate conflicting tags
Multiple rel="icon" tags pointing at different files can confuse audits. Keep one coherent set per format. The scanner lists every tag so you can spot conflicts quickly.
Staging vs production mismatch
You fixed staging. Production still serves old HTML. Always verify the public production URL.
Step-by-step fix workflow
- View-source on the affected page. Note every
link rel="icon",apple-touch-icon, andmanifesttag. - Open each
hrefin a new tab. Fix 404s and HTTP URLs. - Confirm
/favicon.icoloads at the domain root. - Move tags into server-rendered HTML if they only appear after JS.
- Deploy to production over HTTPS.
- Scan with Favicon Check. Confirm every expected file is listed.
- Hard refresh or test incognito in the browser.
- Optional: run the Open Graph scanner on the same URL for a full metadata audit.
When the favicon is missing in search results only
Google may show a favicon in SERPs separately from the browser tab. It fetches declared icons and may prefer larger sizes. If the tab icon works but Google shows a generic icon, wait for recrawl or check Search Console. Tab fix and SERP favicon can lag independently.
FAQ
Why is my favicon not showing in Chrome?
Usually a 404 on the declared path, a relative href on a nested route, or tags added only via JavaScript. Check view-source and open the icon URL directly.
Does every page need its own favicon tag?
No. One set in a shared layout covers the whole site. A missing tag in one template can break icons for entire sections.
Can I use only favicon.ico without link tags?
Many browsers will find root /favicon.ico automatically. Explicit link tags are still recommended for PNG sizes and apple-touch-icon.
Why does my favicon work locally but not in production?
Different base paths, missing files in the deploy artifact, or HTTP vs HTTPS. Compare view-source on both environments.
How do I test without guessing?
Use Favicon Check. It parses HTML, checks /favicon.ico, reads manifest icons, and previews each file.
My favicon disappeared after a framework migration
The new build may output icons to different paths or drop public/ files. Scan production and compare declared URLs to actual static assets.
Is a missing favicon bad for SEO?
It does not directly hurt rankings, but it reduces brand recognition in tabs, bookmarks, and SERP favicon slots. Fix it for trust and polish.
Favicon not showing vs not updating?
Not showing means the browser never finds a valid file. Not updating means an old cached icon persists after you changed the file. Different fixes. If cache is your issue, try incognito first.
Bottom line
A missing favicon comes down to discoverable files and correct server-rendered tags. Fix paths, confirm /favicon.ico, serve over HTTPS, and validate the live URL with Favicon Check. Most cases resolve in one deploy cycle once you see what the crawler actually fetches.
