A broken favicon does not stop your site from loading, which is why it ships broken so often. Tabs show a generic globe, iOS home screens clip your logo, and Android install prompts display a gray placeholder. Each issue traces back to a small HTML, export, or caching mistake that takes minutes to fix once you know the pattern.
This guide lists the favicon mistakes we see most often on production sites and how to fix each one without redoing your entire brand system.
Mistake 1 - only one small PNG for everything
Teams export a single 32×32 PNG and call it done. Desktop tabs survive. iOS home screens upscale a tiny bitmap. Android ignores it for install icons. Google Search may pick a soft 48×48 upscale.
Fix: Ship the full ladder from one 512×512 master: 16×16, 32×32, 180×180, 192×192, 512×512, plus favicon.ico. Size map in the Favicon Sizes Guide.
Mistake 2 - relative paths on nested pages
<link rel="icon" href="favicon.ico">Works on the homepage. Breaks on /blog/my-post because the browser requests /blog/favicon.ico.
Fix: Root-relative paths:
<link rel="icon" href="/favicon.ico" sizes="any">Deep dive in Favicon Not Showing in Browser? Fix It.
Mistake 3 - manifest JSON without HTML link tag
Developers add site.webmanifest to the repo but forget:
<link rel="manifest" href="/site.webmanifest">Android never sees manifest icons. Tab favicon looks fine. Home screen looks wrong.
Fix: Add the manifest link to server-rendered <head>. JSON details in Web App Manifest Icons Explained.
Mistake 4 - skipping apple-touch-icon
iOS does not promote your 32×32 tab PNG to the home screen. Without apple-touch-icon, users get a screenshot or blurry upscale.
Fix:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">Use a true 180×180 PNG, square crop, no manual rounded corners.
Mistake 5 - upscaling a tiny source image
Starting from 16×16 and exporting 512×512 creates blurry manifest and splash icons. The HTML can be perfect. The pixels are not.
Fix: Design at 512×512 or vector master, then downscale. Never upscale. Read Favicon Looks Blurry? Fix Pixelation.
Mistake 6 - wrong sizes metadata on PNG tags
<link rel="icon" type="image/png" sizes="any" href="/favicon-32x32.png">sizes="any" belongs on ICO and SVG, not PNG. Auditors and browsers expect exact dimensions.
Fix:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">Copy-paste correct tags from Favicon HTML Link Tags Example.
Mistake 7 - favicon tags injected only by JavaScript
SPAs that mount <link rel="icon"> after React loads look fine in DevTools Elements. View-source shows nothing. Crawlers, RSS readers, and first paint miss the icon.
Fix: Put icon tags in server HTML or framework layout output. See How to Add a Favicon to Your Website.
Mistake 8 - missing favicon.ico at domain root
Browsers request https://example.com/favicon.ico automatically. If it 404s, some clients show a generic icon even when PNG tags exist.
Fix: Place a multi-size ICO at root or redirect /favicon.ico to your ICO file.
Mistake 9 - SVG only, no raster fallbacks
SVG tab icons help on retina desktop. iOS home screen, manifest, and many crawlers still need PNG or ICO.
Fix: Stack SVG with PNG and ICO fallbacks. SVG Favicon Guide.
Mistake 10 - non-maskable art on Android
Logos that fill the entire square get cropped to circles on Android home screens. Important corners disappear.
Fix: Add maskable PNG variants with safe zone padding. Explained in Web App Manifest Icons Explained.
Mistake 11 - overwriting favicon files in place during rebrand
Same URL, new bytes, old tab icon for days because of browser favicon cache.
Fix: Version file names (favicon-2026.ico), update href, purge CDN. Favicon Cache Explained.
Mistake 12 - icons behind login or wrong MIME type
Staging URLs behind auth return 401 for icon paths. Some servers serve PNG as application/octet-stream.
Fix: Icons must return 200 anonymously with correct Content-Type. Test in incognito.
Mistake 13 - white logo on transparent background
Looks fine on white browser UI. Disappears on dark theme tabs.
Fix: Add a subtle background circle in the master art. Test light and dark chrome.
Mistake 14 - inconsistent icons across subdomains
www.example.com and app.example.com are different origins. Each needs its own icon set and HTML tags.
Fix: Duplicate the full tag block per origin or serve icons from a shared CDN with absolute URLs.
Mistake 15 - never testing production URLs
Localhost icons work. Production HTML omits a tag, CDN serves stale ICO, or one template lacks the layout include.
Fix: Scan every public origin with Favicon Check after deploy. The tool lists declared tags, manifest icons, and /favicon.ico in one pass. For workflow detail, see What Is a Favicon Checker?.
Mistake 16 - declaring icons in CSS instead of HTML
Some themes set background-image on pseudo-elements or inject icons through CSS alone. Browsers, crawlers, and Favicon Check read <link rel="icon"> tags and /favicon.ico, not stylesheet tricks.
Fix: Move icons to proper link tags in HTML. CSS decoration is not a favicon.
Mistake 17 - duplicate conflicting link tags
Multiple plugins each inject their own rel="icon". The browser picks one unpredictably. WordPress customizer plus SEO plugin plus theme header is a common stack of duplicates.
Fix: Audit view-source, remove duplicates, keep one authoritative block from Favicon HTML Example.
Mistake 18 - forgetting favicons on error pages
404 and 500 templates often omit the shared layout head. Users who hit an error see a generic tab icon on an otherwise branded site.
Fix: Include the same favicon block on error templates or inherit the root layout.
Mistake 19 - transparent ICO with wrong bit depth
Old ICO exports use 8-bit palettes that band on retina tabs. The file exists, so "not showing" guides do not help, but the mark looks cheap.
Fix: Export 32-bit PNG-based ICO or multi-size PNG tags. Quality workflow in Favicon Looks Blurry.
Mistake 20 - staging robots blocking icon fetches
Disallow rules or auth middleware on /favicon.ico break icons when misconfigured on production clones.
Fix: Allow anonymous GET on all public icon paths. Confirm with an incognito request before go-live.
Mistake audit checklist
Run this against your live site:
- View-source shows
rel="icon"on a nested page -
/favicon.icoreturns 200 publicly - 16×16 and 32×32 PNGs match declared
sizes - apple-touch-icon is 180×180
- Manifest link tag present and JSON valid
- Manifest includes 192×192 and 512×512 PNGs
- No relative icon paths
- Icons not blocked by auth
- New rebrand uses versioned file names
- Favicon Check scan passes
How mistakes show up by platform
| Platform | Symptom | Likely mistake |
|---|---|---|
| Chrome desktop tab | Generic globe | Missing root ICO and PNG |
| Chrome desktop tab | Blurry mark | Upscaled PNG |
| Safari iOS home screen | Cropped logo | Non-maskable art or missing apple-touch-icon |
| Android home screen | Gray placeholder | Missing manifest link or icons |
| Google Search | Wrong or soft icon | Incomplete size set |
| RSS reader | Old or generic icon | JS-only tags, stale cache |
Fixing mistakes without a full rebrand
- Export correct sizes from existing brand art at 512×512 master.
- Update HTML using the Favicon HTML Example block.
- Deploy with versioned file names if replacing live icons.
- Purge CDN caches for icon paths.
- Rescan with Favicon Check.
- Spot-check iOS Add to Home Screen and one Android device.
Most fixes are an afternoon, not a redesign.
FAQ
What is the most common favicon mistake?
Relative paths that break on nested URLs and missing apple-touch-icon or manifest links.
Can a favicon mistake hurt SEO?
Indirectly. Search results may show a generic or soft favicon, which reduces trust and click-through. Fix icons for UX and brand consistency.
Why does my favicon look fine in Figma but bad in the tab?
Tab icons render at 16×16 or 32×32. Thin strokes and small text disappear. Simplify for small sizes.
Do I need both PNG and ICO?
Recommended. ICO satisfies automatic /favicon.ico requests. PNG gives crisp declared sizes.
How do I find which mistake my site has?
Scan the production URL with Favicon Check. Missing tags, broken paths, and manifest gaps surface in one report.
Should I fix favicon or Open Graph first?
Both matter for different surfaces. Favicons affect tabs and home screens. OG images affect social link previews. Use Favicon Check and the Open Graph scanner on the same URL.
Can CMS plugins cause favicon mistakes?
Yes. Many set only one small ICO via customizer. Override with a full tag set in your theme header.
How often should I audit favicons?
After every rebrand, domain migration, CDN change, or framework migration. Quarterly for high-traffic sites.
Bottom line
Most favicon failures are boring: wrong paths, missing tags, incomplete sizes, stale cache, and bad exports. Ship the full icon ladder, use root-relative HTTPS paths, link your manifest, version files on rebrand, and validate production with Favicon Check. Use the Favicon Sizes Guide and Favicon HTML Example as your baseline templates.
