Favicon Not Showing in Firefox? Fix It in Minutes

You've added a favicon to your site, but Firefox still shows a blank page icon in the tab. This is a common frustration, and the cause is usually one of three things: a caching quirk, a strict parsing rule, or a simple path mistake. Let's get your icon back.

Quick fix: force Firefox to re-fetch the favicon

Before diving into code, try the fastest solution. Firefox caches favicons aggressively, sometimes for days. Clear the favicon cache specifically:

1. Open a new tab and go to about:cache.
2. Under "Disk cache", click "List Cache Entries".
3. Search for "favicon" and remove any entries related to your site.
4. Restart Firefox and reload your page.

If that doesn't work, bypass the cache entirely by appending a query string to your favicon URL in the HTML, like favicon.ico?v=2. This forces Firefox to treat it as a new resource.

Why Firefox specifically fails to show your favicon

Firefox has stricter rules than some browsers. Here are the most common culprits:

• SVG parsing errors: Firefox requires valid XML. A missing namespace or an unclosed tag will cause it to silently ignore the SVG favicon.
• Incorrect MIME type: If your server sends image/x-icon for a PNG file, Firefox may refuse it. Ensure the type attribute matches the actual format.
• Relative path issues: A path like ./favicon.ico can break on nested routes. Use an absolute path or a root-relative one (/favicon.ico).
• Missing link tag: Firefox falls back to /favicon.ico only if no link tag is present. If you have a link tag pointing to a missing file, it won't fall back.

For a deeper dive into Firefox's behavior, see our Firefox favicon guide.

Check your HTML and server response

Start by verifying the link tag in your HTML head. It should look like this:

<link rel='icon' type='image/svg+xml' href='/favicon.svg'>
<link rel='icon' type='image/png' href='/favicon-32x32.png'>

According to the HTML specification, the rel='icon' attribute is the standard way to define a favicon. Firefox respects this, but it also checks the file's integrity.

Next, open Firefox's Developer Tools (F12), go to the Network tab, and reload. Look for the favicon request. If it returns a 404, the path is wrong. If it returns a 200 but the icon still doesn't show, the file might be corrupt or in an unsupported format.

Prevention tips

To avoid this in the future, serve a multi-size ICO file as a fallback, and always include an SVG with proper XML headers. Use absolute paths, and consider adding a version query string when you update the icon. For a comprehensive checklist, see our favicon not showing guide.

If you need to generate a correct set of favicons quickly, Mzu favicondl can create ICO, PNG, and SVG files with the right dimensions and formats.

Conclusion

Firefox favicon issues are usually cache-related or due to strict parsing. Clear the cache, validate your SVG, and double-check your paths. With these steps, your icon should appear in no time.