Favicon Not Showing? Here's How to Fix It
- The most common cause is browser cache — try a hard refresh first (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac)
- If that fails, check your HTML link tag for the correct rel attribute, file type, and href path
- Case sensitivity matters on Linux servers — Favicon.png and favicon.png are different files
- Browsers cache favicons separately from pages — even a full cache clear sometimes does not update them immediately
Table of Contents
Your favicon file exists. The link tag is there. But the tab still shows a gray placeholder. Before checking anything complex, try a hard refresh — that fixes this in the majority of cases because browsers cache favicons more aggressively than regular files.
If the hard refresh does not help, work through the checklist below. The fix is almost always one of five things.
Step 1: Hard Refresh — Fixes 80% of Cases
Browsers cache favicons independently from page content. A normal reload (F5 or Ctrl+R) does not clear the favicon cache. A hard refresh does.
- Windows/Linux: Ctrl+Shift+R (Chrome, Firefox, Edge)
- Mac: Cmd+Shift+R (Chrome, Firefox); Cmd+Option+R (Safari)
- Private/Incognito window: Opening a fresh private window bypasses all cached assets including favicons
If the favicon appears after a hard refresh or in a private window, the issue is purely cache. Your favicon is set up correctly and will appear for new visitors automatically. Regular users will see the updated favicon after their browser cache naturally expires (typically within 24 hours for most browsers).
To force cache-busting for existing visitors, add a version query string to your favicon href: <link rel="icon" href="/favicon.png?v=2">. Change the version number each time you update the favicon.
Step 2: Check Your HTML Link Tag
If the hard refresh does not fix it, check the link tag in your HTML <head>.
Correct tag format:
- PNG:
<link rel="icon" type="image/png" href="/favicon.png"> - ICO:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Common mistakes:
rel="shortcut icon"— outdated syntax; still works in most browsers but switch torel="icon"- Missing the leading slash:
href="favicon.png"works on the homepage but breaks on subpages. Always usehref="/favicon.png"for root-relative paths. - Wrong type attribute: using
type="image/x-icon"on a PNG file causes some browsers to reject it. Match the type to the actual format.
View source (Ctrl+U) on the live page to confirm the link tag is rendering as expected — it is easy for template or build system variables to output the wrong path.
Sell Custom Apparel — We Handle Printing & Free ShippingStep 3: Check the File Path and Server Accessibility
Open a new browser tab and directly visit the favicon URL: type your domain followed by the favicon path (e.g., yourdomain.com/favicon.png).
What you see tells you everything:
- Image loads correctly — the file is there and accessible. The issue is in the link tag or cache.
- 404 error — the file is not at that path. Either the path in your link tag is wrong, or the file was not deployed.
- 403 error — the file exists but server permissions are blocking access. Fix file permissions on the server.
Case sensitivity warning: Linux servers are case-sensitive. If your file is Favicon.png (capital F) but your link tag references /favicon.png (lowercase f), it will return a 404 on Linux but work fine on Windows or Mac during local development.
Always use all-lowercase filenames for web assets to avoid this class of deployment bug.
Browser-Specific Favicon Behavior
Each browser has different favicon caching behavior:
Chrome is the most aggressive favicon cacher. It can hold a favicon for days, ignoring changes even after full cache clears from Chrome settings. The most reliable fix is the version query string approach or opening in incognito.
Firefox is more responsive to cache clears but also stores favicons in a separate database. If Chrome is showing the updated favicon but Firefox still shows the old one, clear Firefox's favicon database separately: go to about:cache in Firefox address bar to see cache details.
Safari on iOS sometimes requires clearing website data specifically (Settings > Safari > Advanced > Website Data) to fully reset a cached favicon.
Edge follows Chrome behavior, since both use the same rendering engine.
The version query string method (href="/favicon.png?v=2") is the most reliable universal fix because it makes each version a distinct URL that browsers treat as a new asset.
Hosting, CDN, and Deployment Issues
If the favicon shows correctly locally but not on the live site, the issue is likely deployment:
- File was excluded from build. Check your build configuration — static asset folders (public/, dist/, static/) are sometimes excluded by .gitignore or deploy scripts. Verify the favicon file is actually in the deployed directory.
- CDN is serving a cached 404. If your CDN served a 404 for the favicon at some point, it may have cached that 404 response. Purge your CDN cache after deploying the favicon file. In Cloudflare: go to Caching > Configuration > Purge Everything.
- Wrong directory. Static site generators and frameworks sometimes have specific requirements about where favicon files must live. Verify the file ends up in the web root (not a subdirectory) after the build runs.
A systematic check: deploy, directly visit the favicon URL, hard refresh the tab, open incognito. If it shows in incognito, it is working and the browser cache is the last holdout.
Generate a Fresh Favicon Set in Under a Minute
If your favicon issues started with a bad file, generate a clean set here — all standard sizes, correct formats, with the exact HTML tags to paste in. Free, no signup.
Open Favicon GeneratorFrequently Asked Questions
Why does my favicon show in Chrome but not Firefox?
Each browser caches favicons separately. Open a private/incognito window in Firefox to bypass the cache and confirm whether the favicon loads. If it shows in private mode, it is a cache issue, not a setup problem.
How do I force browsers to update my favicon after I change it?
Add a version query to the href attribute: link rel="icon" href="/favicon.png?v=2". Change the version number each time you update the file. This makes browsers treat it as a new URL and fetch the updated file immediately.
My favicon was showing fine, then disappeared — why?
Usually a deployment issue: the file path changed in a new build, the file was excluded from deploy, or a CDN cached a 404 response. Check that the favicon file is accessible at its direct URL and purge CDN cache if needed.
Do I need a favicon.ico file even if I use a PNG?
Technically no — modern browsers accept PNG favicons via the link tag. However, browsers also automatically request /favicon.ico by default when visiting a site, with no link tag. Without it, you get a 404 in your server logs. Adding a favicon.ico to your root eliminates those 404 errors.
