Favicon Not Showing? Fixing Sizes, Formats, and Caching Across Browsers (2026)

You added a favicon. It doesn't show in the browser tab. Or it shows the old one no matter how many times you refresh. Or it's blurry on retina screens. Or it works in Chrome but not Safari, and your iPhone home-screen icon is a gray blank square.

Favicons are deceptively hard. "Just add a favicon.ico" was true in 2005. In 2026, you need multiple sizes, formats, and HTML tags for tabs, bookmarks, iOS home screens, Android, and PWAs.

This guide gives you the exact sizes and formats needed, the HTML to include them, and how to defeat favicon caching (the #1 "it won't update" problem).

Why Your Favicon Doesn't Show

The four most common causes

Symptom	Cause
Blank/no icon	Missing file, wrong path, or wrong HTML tag
Old icon persists	Aggressive browser caching (see caching section)
Blurry icon	Only one small size provided, upscaled
Works in Chrome, not Safari/iOS	Missing apple-touch-icon or format Safari rejects

Most "favicon not showing" issues are caching or missing sizes for specific platforms, not a broken file.

The Sizes You Actually Need (2026)

You don't need dozens. This modern, minimal set covers everything:

File	Size	Purpose
`favicon.ico`	16x16, 32x32, 48x48 (multi-res)	Legacy browsers, bookmarks
`favicon.svg`	scalable	Modern browsers (crisp at any size)
`icon-192.png`	192x192	Android / PWA
`icon-512.png`	512x512	PWA splash, high-res
`apple-touch-icon.png`	180x180	iOS home screen

That's 5 files. The old "generate 20 sizes" advice is outdated—modern browsers scale SVG and use the closest PNG.

Format Comparison: ICO vs PNG vs SVG

Format	Pros	Cons	Use for
ICO	Universal, multi-resolution	Old format, larger	`favicon.ico` fallback
PNG	Widely supported, good quality	Fixed size (need multiple)	iOS, Android, PWA
SVG	Scalable, tiny, crisp everywhere	No IE support (irrelevant in 2026)	Modern tab icon

The 2026 recommendation

SVG as the primary tab icon (one file, crisp at all sizes, supports dark mode)
ICO as fallback for older browsers
PNG (180 + 192 + 512) for iOS/Android/PWA

The HTML You Need

Place this in your <head>:

<!-- Modern browsers: SVG (scalable, crisp) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

<!-- Fallback for browsers without SVG favicon support -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- PWA / Android (referenced via manifest) -->
<link rel="manifest" href="/site.webmanifest">

The web manifest (for PWA/Android)

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Defeating Favicon Caching (the #1 problem)

Why the old favicon persists

Browsers cache favicons very aggressively—often ignoring normal cache-control headers and even surviving hard refreshes. You update the file, but the tab still shows the old icon for days.

Fix 1: Version query string

<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">

Bump v=2 to v=3 on each change. The browser sees a "new" URL and re-fetches.

Fix 2: Rename the file

<link rel="icon" href="/favicon-2026.svg">

A new filename guarantees a fresh fetch.

Fix 3: Force local refresh (for testing)

Chrome: Open the favicon URL directly (yoursite.com/favicon.svg), hard-refresh, then reload the page
Clear cache: DevTools → Application → Clear storage
Nuclear option: Test in an incognito window (no favicon cache)

Fix 4: Check your CDN

If you use Cloudflare or another CDN, the old favicon may be cached at the edge. Purge the CDN cache for the favicon URL, not just your browser.

Common Mistakes

Mistake 1: Icon too detailed for 16x16

A logo with fine text or thin lines becomes an unreadable smudge at 16x16 (the tab size).

Fix: Design a simplified mark for small sizes. Test at actual 16x16—if you can't tell what it is, simplify.

Mistake 2: Wrong path

<link rel="icon" href="favicon.svg">   <!-- relative: breaks on sub-pages -->
<link rel="icon" href="/favicon.svg">  <!-- absolute: works everywhere -->

Use an absolute path (leading slash) so it resolves correctly on every page.

Mistake 3: Forgetting iOS

Without apple-touch-icon, adding your site to an iPhone home screen shows a blank or a screenshot instead of your icon. Always include the 180x180 PNG.

Mistake 4: Transparent background on iOS

iOS adds rounded corners but does NOT support transparency well for home-screen icons—transparent areas may render black. Use a solid background for apple-touch-icon.png.

Dark Mode Favicons (bonus)

SVG favicons can adapt to the browser's dark mode:

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Inside the SVG:

<style>
  @media (prefers-color-scheme: dark) {
    .icon-fill { fill: #ffffff; }
  }
</style>

Your icon stays visible whether the user's browser chrome is light or dark.

Quick Setup Checklist

☐ Create SVG favicon (or 512x512 master to generate from)
☐ Generate: favicon.ico (16/32/48), apple-touch-icon.png (180), icon-192.png, icon-512.png
☐ Add the <link> tags to <head>
☐ Add site.webmanifest with 192 + 512 icons
☐ Use absolute paths (leading slash)
☐ Add ?v=1 version string (bump on updates)
☐ Test: tab (Chrome/Safari/Firefox), iOS home screen, Android
☐ If updating: purge CDN cache too

FAQ

Q: Why won't my favicon update?
A: Aggressive browser (and CDN) caching. Add ?v=2 to the URL, rename the file, or purge your CDN. Test in incognito to confirm the file itself is correct.

Q: Do I still need favicon.ico?
A: As a fallback, yes—but SVG is the modern primary. Keep favicon.ico for older browsers and default /favicon.ico requests.

Q: What size should a favicon be?
A: Provide multiple: 16/32/48 in the ICO, an SVG for scaling, 180 for iOS, 192 + 512 for PWA/Android.

Q: Why is my iPhone home-screen icon blank?
A: Missing apple-touch-icon (180x180 PNG) with a solid (non-transparent) background.

Q: Can one SVG replace all favicons?
A: Almost—modern browser tabs, yes. But iOS home screens and Android/PWA still need PNGs, so keep the 180/192/512 PNGs.

Conclusion

Modern favicons need a small, specific set—not dozens of files:

SVG for crisp modern tabs
ICO (16/32/48) as fallback
apple-touch-icon (180, solid background) for iOS
192 + 512 PNG for Android/PWA
Correct <link> tags with absolute paths
Cache-busting (?v=) to force updates
Purge CDN when the old icon sticks

Get these right and your icon shows crisply everywhere—browser tabs, bookmarks, iOS, Android, and PWA installs.