7 Favicon Mistakes That Make Your Site Look Broken (and How to Fix Them)

Favicons don't throw errors. Nobody opens an issue saying your tab shows the default globe. Visitors just notice, somewhere in the back of their mind, that the site feels half-finished — and half of them never say why. These are the seven mistakes behind almost every broken favicon I've come across, and each takes minutes to fix.

1. One lonely 16×16 favicon.ico

It worked in 2005, and that tutorial you found is probably from back then too. Retina tabs want 32 px, Google results show around 48, Android home screens go up to 512. A 16-pixel file stretched to those sizes looks like a smudge. Fix it with a real package: ICO plus PNGs at 32, 180, 192 and 512, and a manifest to declare them.

2. Link tags pointing at files that moved

This is the #1 favicon 404 in the wild, and it's nearly always a migration side effect. Someone reorganizes /assets or switches to hashed build filenames, the page keeps working, and nobody checks the icon paths. The markup says /assets/favicon-32x32.png; the file now lives somewhere else. The Favicon Checker shows exactly which URLs fail — it fetches each referenced file so there's no guessing.

3. No apple-touch-icon at all

Save your site to an iPhone home screen and iOS goes looking for a 180×180 apple-touch-icon. Find nothing, and it uses a scaled screenshot of the page instead. Your icon becomes a tiny unreadable photo of your homepage. One PNG fixes this. Two catches: it must be 180×180, and it shouldn't be transparent — iOS fills transparent pixels with black, which murders dark logos.

4. A transparent logo that disappears in dark mode

Designers love the dark-glyph-on-transparent look, and in a light browser tab it's beautiful. Switch your OS to dark mode and it's gone. Literally invisible. Either put the icon on a solid background, or ship an SVG favicon that flips colors with a prefers-color-scheme media query. Check both themes before you call it done.

5. No web app manifest (so Android never offers install)

This one surprises people. Your tab icon can be perfect and Android will still refuse to offer 'Add to Homescreen' as an app install. The gate is the manifest: it must declare 192×192 and 512×512 icons. No manifest, no install prompt — you get a plain bookmark instead. The file itself is ten lines of JSON.

6. Panicking over the browser cache

Browsers cache favicons harder than almost anything else they load. You fix the icon, redeploy, reload — and the old one stares back at you. Before you revert good changes, verify in an incognito window or with the checker (it fetches fresh, no cache). If you're replacing icons at the same path, add a version query like ?v=2 so returning visitors actually get the new file.

7. Detail that can't survive 16 pixels

Your logo looks fantastic on the office wall. Shrunk to tab size, the wordmark is mush and the gradient-with-text-on-top is a smear. The icon at 16 px isn't a smaller logo — it's a different asset with different rules. Reduce it to one bold element: a letter, a shape. Then eyeball it at actual size, not zoomed to 400% in Figma.

Why this matters more than it used to

Google puts your favicon next to every search result now. People see the icon before they see your site — arguably before they read your title. That tiny square has a first-impression job, and a broken one quietly costs you clicks. Set it up once, re-check after every deploy, and it's handled for good.