Favicon Not Showing? Fix Common Problems (2025)
Fix favicon issues: not showing, wrong icon, blurry, or cached. Step-by-step solutions for Chrome, Safari, Firefox, and mobile browsers.
Your favicon package is installed, but the icon isn't showing up—or it's showing the wrong one. Don't worry, this happens all the time. Browser caching, wrong file paths, and platform quirks can all cause favicon problems.
This guide walks you through the 5 most common favicon issues and shows you exactly how to fix them. Most problems take less than 5 minutes to solve once you know where to look.
Problem 1: Favicon doesn't show up at all
First, check your HTML. Open your page source (Ctrl+U or Cmd+Option+U) and search for "favicon" or "icon". You should see <link rel="icon"> tags in the <head> section. If they're missing, the browser has nothing to load.
Next, open DevTools (F12), go to the Network tab, and reload the page (Ctrl+R or Cmd+R). Filter by "favicon" or "icon". If you don't see any requests, your HTML link tags aren't working. If you see 404 errors, the files are in the wrong folder.
Common fix: Make sure you uploaded the /icons/ folder to your website's root directory (same folder as index.html). Check that the href paths in your HTML match where you put the files. For example, if your files are at /assets/icons/, your HTML should say href="/assets/icons/favicon-32x32.png".
Problem 2: Favicon shows the old icon after updating
This is the #1 favicon problem. Browsers cache favicons aggressively—sometimes for weeks. Even after you upload new files, users (and you) might still see the old icon.
Quick fix: Add a version number to your favicon file names. Rename favicon-32x32.png to favicon-32x32-v2.png, then update all your <link> tags to match. This forces browsers to download the new files because the URL changed.
Alternative: Add a query string to your existing files. Change href="/icons/favicon-32x32.png" to href="/icons/favicon-32x32.png?v=2". This works too, but some CDNs ignore query strings, so renaming files is more reliable. After updating, test in an incognito window (Ctrl+Shift+N or Cmd+Shift+N) to see the new icon immediately.
Problem 3: Favicon works on some pages but not others
If your homepage shows the right favicon but other pages don't, you probably have inconsistent <head> sections. This happens a lot on sites with multiple templates or layouts.
Search your codebase for all favicon-related tags. Look for <link rel="icon">, <link rel="apple-touch-icon">, and <meta name="msapplication">. You might find old snippets in header.php, _document.tsx, or layout files that override your new setup.
Fix: Move all favicon tags to a single shared layout or header component. Delete any old favicon code from individual page templates. If you're using WordPress, check both your theme's header.php and any header/footer plugins. Make sure every page uses the same favicon configuration.
Problem 4: Favicon works on desktop but not on mobile (or vice versa)
iOS Safari uses Apple Touch Icons (<link rel="apple-touch-icon">) for home screen shortcuts. If your icon looks wrong on iOS, check that you have apple-touch-icon tags in your HTML and that the PNG files are at least 180×180 pixels. iOS ignores regular favicon tags for home screens.
Android Chrome uses icons from your web app manifest (manifest.json). If your icon doesn't show up when users "Add to Home Screen" on Android, check that your manifest.json has an icons array with 192×192 and 512×512 PNG files. Make sure the manifest is linked in your HTML: <link rel="manifest" href="/manifest.json">.
Windows tiles need browserconfig.xml with TileImage and TileColor settings. If you're not targeting Windows, you can skip this. Always test on real devices when possible—emulators don't always match real browser behavior.
Still stuck?
If none of these fixes work, double-check that your favicon files are valid PNG or ICO files (not corrupted or renamed JPEGs). Use our Image Converter to regenerate your favicon package from scratch—sometimes starting fresh solves weird issues.