Complete Firefox Favicon Guide
Master favicon implementation for Firefox: format support, caching behavior, SVG favicons, and troubleshooting for Mozilla's browser.
Firefox Favicon Support
ICO, PNG, SVG
Full format support
Tab Size
Standard display
Market Share
Global desktop usage
Firefox Format Support
| Format | Support | Since Version | Notes |
|---|---|---|---|
| .ico | ? Full | Firefox 1.0 | Legacy format, universal support |
| .png | ? Full | Firefox 1.0 | Preferred modern format |
| .svg | ? Full | Firefox 41+ | Scalable, supports dark mode |
| .gif | ? Limited | Firefox 1.0 | Static only, no animation |
| .jpg/.jpeg | ? No | - | Not supported for favicons |
Firefox Favicon Implementation
Recommended HTML (All Formats)
<!-- Firefox supports all these formats -->
<!-- ICO format (legacy, all browsers) -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG formats (modern, recommended) -->
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
<!-- SVG format (Firefox 41+, scalable, dark mode) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Shortcut icon (legacy syntax, still works) -->
<link rel="shortcut icon" href="/favicon.ico">Minimal Setup (Firefox Only)
If targeting only Firefox, this is sufficient:
<!-- Firefox auto-detects /favicon.ico -->
<!-- No link tag needed if file is in root -->
<!-- Or explicitly specify -->
<link rel="icon" href="/favicon.png">/favicon.ico even without a link tag, but explicit declaration is recommended for reliability.
SVG Favicons in Firefox
Firefox SVG Support (v41+)
Firefox has excellent SVG favicon support with advanced features:
Basic SVG Favicon:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" fill="#FF6900"/>
<text x="16" y="20" font-size="16" text-anchor="middle" fill="white">F</text>
</svg>Dark Mode SVG (Firefox 96+):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
circle { fill: #000; }
text { fill: #fff; }
@media (prefers-color-scheme: dark) {
circle { fill: #fff; }
text { fill: #000; }
}
</style>
<circle cx="16" cy="16" r="14"/>
<text x="16" y="20" font-size="16" text-anchor="middle">F</text>
</svg>SVG Advantages in Firefox:
- Perfect scaling at any size
- Dark mode support (v96+)
- Smaller file size than PNG
- CSS styling support
- Media query support
Limitations:
- No external resources (images, fonts)
- No JavaScript execution
- No animations (static only)
- Keep simple for performance
Firefox Caching Behavior
Understanding Firefox Favicon Cache
Firefox has aggressive favicon caching. Understanding this is crucial for updates:
Cache Locations:
| Cache Type | Location | Duration |
|---|---|---|
| Favicon Database | favicons.sqlite |
Permanent until cleared |
| Memory Cache | RAM | Until browser restart |
| Disk Cache | Profile folder | Based on Cache-Control |
Clear Firefox Favicon Cache:
- Press Ctrl+Shift+Delete (Windows/Linux) or Cmd+Shift+Delete (Mac)
- Select "Everything" for time range
- Check only "Cache"
- Click "Clear Now"
- Restart Firefox
- Navigate to your website
- Press Ctrl+F5 or Ctrl+Shift+R
- May need multiple refreshes
- Or hold Shift and click Reload button
- Close Firefox completely
- Navigate to Firefox profile folder
- Delete
favicons.sqlite - Restart Firefox (new database created)
favicon.ico?v=2 to bypass cache during development.
Where Favicons Appear in Firefox
Browser Tabs
Size: 16x16px
Display: Left side of tab title
Behavior: Updates on page load
Bookmarks
Size: 16x16px
Display: Bookmark toolbar, menu
Behavior: Cached permanently
History
Size: 16x16px
Display: History sidebar/library
Behavior: Stored in favicons.sqlite
Address Bar
Size: 16x16px
Display: Awesome Bar suggestions
Behavior: Helps identify suggestions
Firefox Favicon Troubleshooting
Common Firefox Issues & Solutions
- File doesn't exist or wrong path
- MIME type incorrect (server issue)
- File corrupted or wrong format
- HTTPS mixed content (icon on HTTP, site on HTTPS)
- Verify file exists:
yourdomain.com/favicon.ico - Check browser console (F12) for errors
- Ensure HTTPS for both site and favicon
- Clear cache and test in Private Window
Solutions (in order):
- Hard refresh: Ctrl+F5
- Clear browsing data (Cache only)
- Restart Firefox
- Delete favicons.sqlite (if desperate)
- Add version query:
?v=2
- Firefox version 41+ required
- MIME type:
image/svg+xml - No external resources in SVG
- Valid XML structure
- Provide PNG fallback for older versions
- Provide 16x16px optimized version
- Use ICO format with multiple sizes
- Don't rely on browser scaling
- Consider SVG for perfect scaling
Testing Favicons in Firefox
Firefox Developer Tools
- Press F12 to open DevTools
- Go to Network tab
- Reload page (F5)
- Filter by "Images" or search "favicon"
- Check:
- Status code (should be 200)
- Size (shouldn't be 0 bytes)
- Type (image/x-icon, image/png, image/svg+xml)
- Cache status
Console Check
// Check favicon link in console
document.querySelector("link[rel*='icon']").href
// Output example:
// "https://yoursite.com/favicon.ico"Firefox Favicon Best Practices
? Do's
- Provide multiple formats (ICO, PNG, SVG)
- Include 16x16px optimized version
- Use SVG for dark mode support
- Set proper MIME types on server
- Test in Private Window
- Add Cache-Control headers
- Keep file sizes small (<5KB)
? Don'ts
- Don't use JPEG format
- Don't rely only on ICO
- Don't forget HTTPS consistency
- Don't use external resources in SVG
- Don't skip testing in Firefox
- Don't use animated GIFs
- Don't ignore cache behavior
Generate Firefox-Compatible Favicons
Create optimized favicon packages that work perfectly in Firefox
Generate Favicons