How to Test Your Favicon Across All Browsers and Devices
Your favicon looks great in Chrome but broken on Safari? A systematic testing checklist with tools and common failure modes.
You uploaded a beautiful favicon, deployed your site, and it looks perfect in Chrome on your laptop. Then you open it on an iPhone and the home screen shows a blank white square. Your colleague on Windows sees a pixelated mess in their taskbar. A friend shares your link on Slack and the preview shows no image at all.
Favicon testing is unglamorous but necessary. Each browser and platform has its own rules about which file it picks, what size it expects, and how it handles missing formats. Here is a systematic way to catch problems before your users do.
The Testing Checklist
| Test | What to check | How to test |
|---|---|---|
| Browser tab (Chrome) | Icon is sharp, recognizable | Open site in Chrome |
| Browser tab (Firefox) | Same icon, same quality | Open in Firefox |
| Browser tab (Safari) | Icon displays, not pixelated | Open in Safari |
| Bookmark bar | Recognizable at small size | Bookmark the page, check bar |
| iOS home screen | 180x180 icon, no white box | Add to Home Screen on iPhone |
| Android shortcut | Adaptive icon, correct mask | Add to Home Screen on Android |
| Dark mode tab | Icon visible on dark chrome | Enable dark mode in OS |
| Social share preview | OG image shows correctly | Paste URL in Slack/Twitter |
| Google search result | Favicon shows next to URL | Search for your domain |
Chrome DevTools Method
The fastest way to debug favicon issues is Chrome DevTools. Open your site, go to the Application tab, and look at the Manifest section. It shows every icon your manifest declares, their sizes, and whether they loaded successfully.
For the basic favicon (tab icon), check the Network tab and filter by "favicon" or "icon". You will see which requests the browser made and which file it actually loaded. A 404 on any of these requests means a missing file.
// Run in browser console to check all favicon-related link tags
document.querySelectorAll('link[rel*="icon"]').forEach(el => {
console.log(el.rel, el.href, el.sizes?.value || 'no size')
})Common Failure Modes
Blank square on iOS
iOS ignores favicon.ico and .svg favicons entirely. It looks specifically for <link rel="apple-touch-icon"> pointing to a 180x180 PNG. If that tag or file is missing, iOS renders either a screenshot thumbnail of your page (which looks terrible) or a blank icon.
Apple is strict about this
apple-touch-icon must be exactly 180x180 pixels. Apple will not use a 192x192 or 512x512 fallback. If you only serve one PNG size, make it 180x180 and let the Apple Touch icon link point to it.Favicon not updating after deploy
Browsers cache favicons more aggressively than almost any other resource. Some browsers store favicons in a separate database that persists even after clearing the normal cache. Workarounds include:
- Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
- Incognito/private window
- Append a cache-buster query string:
favicon.ico?v=2 - Clear the favicon cache specifically (Chrome stores it in a separate SQLite database)
- Wait. Some browsers update favicon caches on a 24-hour cycle.
Wrong icon from a previous version
If you changed your favicon but the old one still appears, check that you did not leave stale files in your deployment. A public/favicon.ico from a previous version will override an app/favicon.ico in some frameworks. Make sure there is only one source of truth.
Pixelated on high-DPI screens
If your favicon looks pixelated on a Retina or high-DPI display, you are probably serving only a 16x16 icon. Modern high-DPI screens render browser tabs at 32x32 or even 48x48 pixels. Your ICO file needs to include these larger sizes, or you need explicit sizes attributes on your link tags pointing to appropriately sized PNGs.
Online Testing Tools
RealFaviconGenerator has a free favicon checker that tests your live URL against all major platforms and reports missing formats, incorrect sizes, and implementation issues. It catches things you would probably miss manually.
For social sharing previews, use the platform's own debugger tools. Facebook has the Sharing Debugger, Twitter has the Card Validator, and LinkedIn has the Post Inspector. Each one fetches your page and shows exactly what users will see when your URL is shared.
Test early, test often