Back to Blog

Why Is My Favicon Not Showing? The Complete Troubleshooting Guide

favicon not showingfavicon troubleshootingfavicon cachefavicon not workingfavicon problems

You've added a favicon to your website. The code looks right. The file exists. But when you load your page, that frustrating generic browser icon stares back at you instead of your carefully designed favicon.

This is one of the most common problems web developers face, and it's maddening because favicons should be simple. The good news: there's always a reason, and it's almost always fixable once you know where to look.

This guide covers every cause of missing favicons I've encountered over years of debugging this exact issue—from the obvious culprits to the obscure edge cases that can waste hours of your time.

The Most Common Cause: Browser Caching

Let's start with what trips up 70% of people: your favicon is actually working, but your browser is showing you an old cached version (or the absence of one).

Browsers cache favicons aggressively. Far more aggressively than other assets. Chrome, for instance, stores favicons in a separate database that persists even when you clear your regular cache. This means your standard "clear cache and refresh" often doesn't work for favicons.

How to Actually Clear Your Favicon Cache

Chrome (the nuclear option that actually works):

  1. Close all tabs for your site
  2. Navigate to chrome://history
  3. Search for your domain
  4. Delete all entries for your site
  5. Restart Chrome completely

Alternatively, visit your favicon URL directly (e.g., yourdomain.com/favicon.ico) and do a hard refresh with Ctrl+Shift+R (Windows) or Cmd+Shift+R (Mac).

Firefox:

  1. Open your site
  2. Press Ctrl+Shift+Delete
  3. Select "Cache" only
  4. Set time range to "Everything"
  5. Clear and refresh

Safari:

Safari stores favicons in a separate database file. The reliable method:

  1. Close Safari
  2. Delete ~/Library/Safari/Favicon Cache/
  3. Reopen Safari

The Developer's Best Friend: Incognito Mode

Before you do any of this, open your site in a private/incognito window. This bypasses the favicon cache entirely and shows you what new visitors actually see. If your favicon appears in incognito but not in your regular browser, caching is definitively your issue.

Incorrect File Path or HTML Reference

The second most common issue is a mismatch between where your HTML says the favicon is and where it actually lives.

Check Your HTML Link Element

Here's what a correct favicon reference looks like:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Common mistakes I see constantly:

Missing leading slash:

<!-- This looks for favicon relative to current page path -->
<link rel="icon" href="favicon.ico">

<!-- This looks from the site root - usually what you want -->
<link rel="icon" href="/favicon.ico">

If your homepage favicon works but inner pages don't, this is almost certainly the issue. A relative path like href="favicon.ico" means "look in the same folder as the current page." On /blog/my-post, it would look for /blog/favicon.ico.

Wrong path entirely:

<!-- File is in /images/ but you wrote /assets/ -->
<link rel="icon" href="/assets/favicon.ico">

Verify the File Actually Exists

Open your browser and navigate directly to where your HTML says the favicon should be:

https://yourdomain.com/favicon.ico

You should see your favicon image. If you get a 404 error, you've found your problem.

File Format Issues

Not all image files are valid favicons, even if they have the right extension.

The .ico File Isn't Actually an ICO

This catches people all the time. Renaming a PNG file to favicon.ico doesn't make it an ICO file. These are different formats internally.

ICO is a container format that can hold multiple image sizes. A PNG is a single raster image. Some browsers (Chrome, Firefox) are forgiving and will display a renamed PNG. Others (older Edge versions, some mobile browsers) will refuse to render it.

How to check: Open your .ico file in a hex editor or just try to open it in an image viewer that specifically supports ICO files. If your "ICO" is really a PNG, you need to convert it properly.

The fix: Use a proper converter or generator that creates actual ICO format files. When you generate favicons with our tool, you get correctly formatted ICO files along with all the PNG sizes you need.

Corrupted Image Files

Favicons can become corrupted during upload, especially on shared hosting with aggressive optimization plugins. Download your favicon from your live server and try opening it locally. If it won't open or looks wrong, re-upload the original file.

SVG Favicon Issues

SVG favicons are powerful but have specific requirements:

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

Common SVG favicon problems:

  1. Wrong MIME type from server — The server must serve SVG with image/svg+xml, not text/plain
  2. SVG references external resources — Favicons can't load external fonts or linked images
  3. Browser support — Safari only added SVG favicon support in version 15 (2021). Always provide a fallback:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" href="/favicon.png">

Server and Hosting Issues

Sometimes the problem isn't your code—it's how your server handles the request.

Wrong MIME Types

When a browser requests your favicon, the server tells it what type of file to expect. If the server says "this is a text file" but sends an image, browsers may reject it.

Check your MIME type by opening browser DevTools (F12), going to the Network tab, refreshing, and finding the favicon request. Look at the Content-Type response header.

Correct MIME types:

  • .ico → image/x-icon or image/vnd.microsoft.icon
  • .png → image/png
  • .svg → image/svg+xml

Apache fix (.htaccess):

AddType image/x-icon .ico
AddType image/png .png
AddType image/svg+xml .svg

Nginx fix:

location ~* \.ico$ {
    add_header Content-Type image/x-icon;
}

CDN Caching Your Missing Favicon

If you use a CDN (Cloudflare, CloudFront, Fastly), it might have cached a 404 response or old version of your favicon.

Purge your favicon specifically from the CDN cache. In Cloudflare, go to Caching > Configuration > Purge Cache > Custom Purge, and enter your favicon URLs.

Security Headers Blocking the Favicon

Overly strict Content Security Policy (CSP) headers can block favicon loading. Check your browser's Console tab for CSP violation errors.

If you see something like Refused to load the image because it violates the Content Security Policy directive: "img-src", you need to add your favicon source to your CSP:

Content-Security-Policy: img-src 'self' data:;

Platform-Specific Issues

Different platforms have unique favicon quirks.

WordPress

WordPress has its own Site Icon system (Appearance > Customize > Site Identity). If you've added a favicon manually but WordPress is serving a different one:

  1. Check if your theme overrides the favicon in header.php
  2. Look for favicon plugins that might conflict
  3. Clear any caching plugin (WP Super Cache, W3 Total Cache, etc.)

WordPress also creates its own /wp-includes/images/w-logo-blue-white-bg.png which can appear if your custom favicon fails.

Shopify

Shopify favicons go in Settings > Brand > Favicon. If you're trying to use custom HTML:

  1. Shopify compresses favicons—upload at a higher quality
  2. Some themes override the settings panel favicon
  3. The Shopify CDN caches aggressively; wait 10-15 minutes after changes

Squarespace

Squarespace: Design > Browser Icon. Common issues:

  1. Using unsupported formats (Squarespace only accepts .ico for the browser icon in some templates)
  2. Image too large—Squarespace has a 100KB limit
  3. Custom code injection being overridden by theme defaults

GitHub Pages

GitHub Pages serves from a subdirectory (username.github.io/repo/). Your favicon path needs to account for this:

<link rel="icon" href="/repo-name/favicon.ico">

Or use Jekyll's built-in path helpers.

HTML Placement and Syntax Problems

Where and how you write your favicon code matters.

Favicon Link Outside Head Section

The <link> element for your favicon must be inside the <head> section:

<!DOCTYPE html>
<html>
<head>
    <title>My Site</title>
    <!-- Favicon MUST be here, inside <head> -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <!-- NOT here -->
</body>
</html>

Syntax Errors in Your HTML

A missing quote or typo can break the entire link element:

<!-- Broken - missing closing quote -->
<link rel="icon" type="image/x-icon href="/favicon.ico">

<!-- Broken - rel misspelled -->
<link rel="icn" type="image/x-icon" href="/favicon.ico">

Validate your HTML at validator.w3.org to catch these.

Multiple Conflicting Favicon Declarations

If you have multiple favicon link elements, browsers may pick the "wrong" one:

<!-- Which one wins? It depends on the browser -->
<link rel="icon" href="/favicon-old.ico">
<link rel="icon" href="/favicon-new.png">
<link rel="shortcut icon" href="/favicon-ancient.ico">

Clean up your HTML. Remove deprecated shortcut (it's not needed since IE11), and have one clear set of favicon links.

The Fallback Problem: /favicon.ico

Even if you specify a custom path in your HTML, many browsers also look for /favicon.ico at your domain root. If someone bookmarks your page and your custom favicon fails to load later, the browser falls back to checking the root.

Always place a favicon.ico in your root directory, even if you primarily use PNG favicons declared in HTML:

<!-- Your preferred PNG favicons -->
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">

<!-- But ALSO have /favicon.ico at root as fallback -->

HTTPS/HTTP Mismatch

If your site is on HTTPS but your favicon URL points to HTTP (or vice versa), browsers may block it as mixed content:

<!-- Your site is https://example.com but you wrote: -->
<link rel="icon" href="http://example.com/favicon.ico">

Fix: Use protocol-relative URLs or, better, just use relative paths:

<!-- Best approach - works regardless of protocol -->
<link rel="icon" href="/favicon.ico">

Mobile and App-Specific Icons Not Showing

Desktop favicon working but mobile icons missing? These are actually different systems.

Apple Touch Icons

For iOS devices to show your icon when saving to the home screen, you need:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Apple Touch Icons have their own set of requirements—they must be PNG, and iOS will apply its own rounded corners and effects.

Android/Chrome Icons

Android uses the Web App Manifest:

<link rel="manifest" href="/site.webmanifest">

With a manifest file containing:

{
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

If your desktop favicon works but mobile bookmarks show a blank or screenshot, check these specific icon types.

Debugging Tools and Final Checks

Browser DevTools Network Tab

  1. Open DevTools (F12)
  2. Go to Network tab
  3. Filter by "Img" or search "favicon"
  4. Refresh the page
  5. Look for red (failed) requests or unexpected 404 statuses

RealFaviconChecker

After implementing your favicon, test it across platforms. Look at the request status, the actual image served, and any error messages.

The Definitive Test Sequence

When all else fails, run through this checklist:

  1. ✓ Open site in incognito/private window
  2. ✓ Navigate directly to favicon URL—does it load?
  3. ✓ Check DevTools Network tab for the request status
  4. ✓ Verify the MIME type in response headers
  5. ✓ Validate your HTML at validator.w3.org
  6. ✓ Test on a completely different device/network
  7. ✓ Check server error logs for failed requests

When You Need to Start Fresh

Sometimes the cleanest solution is to start over with a properly generated favicon set. If you've been fighting corrupted files, format issues, or just aren't sure what went wrong, generating fresh favicons with all the correct formats and a clean HTML snippet can save hours of debugging.

Our favicon generator creates every format you need—ICO, PNG at all sizes, SVG, Apple Touch Icons, and Android Chrome icons—with the exact HTML code to implement them. No more wondering if your file format is correct or if you're missing a size.

Frequently Asked Questions

Why does my favicon work locally but not in production?

This usually means either: (1) the file wasn't deployed/uploaded correctly, (2) the file path works on localhost but not on your production URL structure, or (3) your production server has different MIME type configurations. Check the Network tab on your live site to see if the favicon request returns a 404 or wrong content type.

How long does it take for a new favicon to appear?

For you, after clearing cache properly—immediately. For returning visitors with your old favicon cached, it can take anywhere from a few days to several weeks depending on their browser. There's no way to force visitors' browsers to update, but using versioned URLs (like favicon.ico?v=2) can help.

Why does my favicon show on some pages but not others?

This is almost always a relative path issue. Check whether your href uses an absolute path from root (/favicon.ico) or a relative path (favicon.ico). Pages in subdirectories need the absolute path to find a favicon at the root.

My favicon shows in Chrome but not Safari—why?

Safari is pickier about formats and caching. Ensure you're serving a properly formatted ICO or PNG file with the correct MIME type. Safari also caches favicons in a separate database; try clearing ~/Library/Safari/Favicon Cache/ on Mac.

Do I need both a favicon.ico file AND the link element in my HTML?

Technically, just the HTML link element should work. Practically, you should have both. The /favicon.ico at root acts as a fallback that some browsers and tools check automatically, and it's what appears in bookmarks if the declared favicon fails to load for any reason.

View All Posts
Premium Favicon

The smartest way to generate favicons for your next website or application. Built for developers, designers, and visionaries.

Resources

© 2026 Premium Favicon. All rights reserved.

Made with❤by Taabish