Favicon Browser Compatibility - Chrome, Firefox, Safari, Edge (2025)
Complete favicon browser compatibility guide for Chrome, Firefox, Safari, Edge, iOS, and Android. Learn which formats and sizes work in each browser.
Not all browsers handle favicons the same way. Chrome loves PNG, Safari prefers ICO fallbacks, iOS ignores your web manifest, and Android needs specific sizes for home screen icons. If you've ever wondered why your favicon works in Chrome but not Safari, or why it looks blurry on iOS, this guide is for you.
This guide shows you which icon files matter for each browser (Chrome, Firefox, Safari, Edge, iOS Safari, Android Chrome), which formats they support (ICO, PNG, SVG), and how to avoid common compatibility issues. Takes about 5 minutes to read, and you'll know exactly which files you need.
How browsers load favicons
All desktop browsers still look for /favicon.ico by default as a legacy fallback. Even if you don't have a <link rel="icon"> tag in your HTML, browsers will try to fetch /favicon.ico from your site's root directory. This behavior dates back to Internet Explorer 5 (1999), and it's still here in 2025.
Modern browsers prefer explicit <link rel="icon"> tags in your HTML <head> section. These tags give you more control—you can specify multiple sizes, different formats (PNG, SVG), and even different icons for light/dark mode. If you have both /favicon.ico and <link rel="icon"> tags, the link tags take priority.
On high-DPI screens (Retina displays, 4K monitors), browsers prefer higher-resolution icons when available. If you provide both 16×16 and 32×32 PNG files, browsers will pick the 32×32 on Retina screens to avoid blurry icons. This is why you need multiple sizes—one size doesn't fit all.
Desktop browsers: Chrome, Firefox, Edge, Safari
Chrome (Windows, Mac, Linux): Supports ICO, PNG, and SVG favicons. Prefers PNG for tab icons (uses 16×16 or 32×32 depending on screen DPI). Supports SVG favicons since Chrome 80 (2020). Automatically fetches /favicon.ico if no <link rel="icon"> tag is found. Works great with all modern formats.
Firefox (Windows, Mac, Linux): Supports ICO, PNG, and SVG favicons. Prefers PNG for tab icons (16×16 or 32×32). Supports SVG favicons since Firefox 41 (2015). Has the best SVG support of all browsers—even complex SVGs render well. Also fetches /favicon.ico as a fallback.
Safari (Mac): Supports ICO, PNG, and SVG favicons (SVG support added in Safari 12, 2018). Older Safari versions (pre-2018) only support ICO and PNG, so always include a /favicon.ico fallback for older Macs. Safari is pickier about file formats than Chrome—if your ICO file is malformed, Safari might not display it.
Mobile browsers: iOS Safari and Android Chrome
iOS Safari (iPhone, iPad): Ignores <link rel="icon"> tags and web manifest icons for home screen shortcuts. Instead, it looks for <link rel="apple-touch-icon"> tags with 180×180 PNG files. If you don't provide an Apple Touch Icon, iOS will take a screenshot of your page and use that as the icon (which looks terrible). For tab icons in Safari, iOS uses the standard favicon (16×16 or 32×32 PNG).
Android Chrome (phones, tablets): Uses icons from your web manifest (manifest.json) for home screen shortcuts. Looks for 192×192 and 512×512 PNG files in the manifest's icons array. For tab icons in the browser, it uses the standard <link rel="icon"> tags (16×16 or 32×32 PNG). Supports maskable icons (adaptive icons with safe padding) if you add "purpose": "maskable" to your manifest.
Key difference: iOS uses Apple Touch Icons for home screen, Android uses web manifest icons. You need both if you want to support all mobile users. Don't assume the web manifest will work on iOS—it won't. Check our Apple Touch Icon tutorial and Web Manifest tutorial for setup instructions.
Common compatibility issues
Mixed content blocking: If your site is HTTPS but your favicon URLs are HTTP, browsers will block the icons for security reasons. Make sure all icon URLs use HTTPS (or relative paths like /favicon.ico, which inherit the page's protocol). Check the Console in DevTools for "Mixed Content" errors.
Aggressive caching: Browsers cache favicons for a long time (sometimes weeks). If you update your favicon and it doesn't change, clear your browser cache (Ctrl+Shift+Delete or Cmd+Shift+Delete) or open an incognito window. On mobile, you might need to delete the home screen shortcut and add it again to see the new icon.
Privacy extensions blocking icons: Some ad blockers or privacy extensions (uBlock Origin, Privacy Badger) may block favicon requests if they think the icons are tracking pixels. This is rare, but if users report missing favicons, ask them to disable extensions temporarily to test.
How to test favicon compatibility
Desktop testing: Open your site in Chrome, Firefox, Safari, and Edge. Check the tab icon, bookmark the page, and look at the browser history. The favicon should appear in all three places. If it's missing or blurry, check the Network tab in DevTools—look for 404 errors or wrong file sizes.
Mobile testing: Test on iOS Safari (iPhone or iPad) and Android Chrome (phone or tablet). For iOS, tap Share → "Add to Home Screen" and check the icon preview. For Android, tap the three-dot menu → "Add to Home screen". The icons should be sharp and match your brand. If they're blurry or show screenshots, check your Apple Touch Icon tags and web manifest.
Regression testing: Whenever you change icon files, file formats, or HTML tags, repeat the tests above. Favicon bugs are easy to introduce (wrong file path, missing size, broken ICO file) and hard to notice until users complain. Test on at least 2 desktop browsers and 1 mobile browser before deploying.
Ready to generate compatible favicons?
Now that you understand browser compatibility, use our Image Converter to generate all the formats and sizes you need. Upload your logo and get ICO, PNG, and SVG files that work in all browsers. Download the ZIP, upload the files to your server, and copy the HTML code—it's tested on Chrome, Firefox, Safari, Edge, iOS, and Android.