1) Missing files or wrong path
Ensure `/favicon.ico`, PNG sizes, and `site.webmanifest` exist where your tags point.
Favicon Troubleshooting
Favicon Not Showing? Fix It In 5 Minutes
If your favicon is missing, stale, or inconsistent between devices, use this checklist to identify the exact issue and deploy a stable fix.
From broken state to validated setup.
Quick Root-Cause Checklist
2) Browser cache still using old icon
Version your favicon URLs with `?v=2` and hard-refresh to force updates.
3) Incomplete HTML tag set
Provide standard icon tags plus Apple Touch Icon and manifest links.
4) Platform-specific requirement mismatch
Google, iOS, and Android each require specific sizes and format support.
Minimum Tag Set (Copy/Paste)
Use this baseline in your page head:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
<link rel="manifest" href="/site.webmanifest?v=2">Debug Flow (In Order)
-
Step 1
Generate a fresh favicon package from Favicon Generator.
-
Step 2
Upload files and update your head tags exactly once, avoiding duplicate `rel=icon` conflicts.
-
Step 3
Add a query version suffix to favicon URLs so cache picks up new assets.
-
Step 4
Validate with Favicon Checker across desktop and mobile.
Frequently Asked Questions
-
Browsers cache favicons aggressively and handle fallback rules differently. Use versioned URLs and include multiple icon sizes.
-
It is still helpful for legacy compatibility. Keep it alongside PNG and Apple Touch Icon files.
-
Potentially a long time depending on headers and browser state. Versioning is the safest way to force refresh.
-
Run the Favicon Checker and confirm each platform section passes.
Related Pages
Explore related tools to keep your workflow fast and consistent.
