Favicon Best Practices 2026: Sizes, SVG, Dark Mode, PWA
The old answer to ‘what favicon sizes do I need?’ was an endless grid of 15+ files. In 2026 modern browsers accept SVG natively, iOS ate Apple Touch Startup Image, and Windows tiles quietly died. Here is the minimum viable favicon setup plus everything you need to know about SVG + ICO, dark mode, PWA, and cache invalidation.
Table of Contents
The 2026 minimum viable favicon setup
Most favicon generators from 2015 produced 15-30 files because every browser + OS version expected a specific slot. Most of those slots are dead now. In 2026 you ship three files:
public/
├── favicon.svg # modern browsers, infinite scaling
├── favicon.ico # multi-size container (16/32/48/+)
└── apple-touch-icon.png # iOS home screen (180×180)Plus four HTML tags in the document <head>. That is the complete setup. Everything else is either redundant or only needed for specific edge cases (PWA manifest, dark mode, legacy Windows tiles).
Every favicon size that still matters
| Size | Where it appears | Required? |
|---|---|---|
| 16×16 | Browser tab, bookmarks bar | Required |
| 32×32 | Retina browser tabs, some macOS contexts | Required |
| 48×48 | Windows taskbar site pinning | Required |
| 64×64, 128×128 | HiDPI Windows / Chrome desktop shortcuts | Recommended |
| 180×180 | iOS home screen (apple-touch-icon) | Required (if any iOS traffic) |
| 192×192, 512×512 | PWA manifest, Android install prompts | Required if PWA |
| 256×256 | Windows 10/11 large tiles | Optional |
| 1024×1024 | App store submission (separate from web favicon) | App-only |
For deep coverage of app icon sizes specifically, see our SVG to PNG developer guide.
SVG + ICO: the hybrid approach
SVG favicons are the future — one file, infinite resolution, CSS-themable. But as of April 2026 their support has gaps:
- Chrome, Firefox, Edge, Safari 14+: full support for SVG favicons in tabs.
- iOS Safari home screen: still expects raster (apple-touch-icon.png).
- Windows taskbar pin: uses ICO variants, ignores SVG.
- Many email clients / RSS readers: parse only ICO or PNG.
- Slack, Discord, link previews: some respect SVG, some do not.
The hybrid approach solves this: modern browsers fetch and render the SVG first, legacy clients fall back to ICO or the apple-touch-icon PNG. The browser picks automatically based on link rel ordering and Accept header.
The four HTML tags you actually need
<!-- Legacy fallback (ICO) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<!-- Modern browsers (SVG) -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- iOS home screen -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- PWA manifest (only if you ship a PWA) -->
<link rel="manifest" href="/manifest.webmanifest">Three lines if you do not ship a PWA, four if you do. Anything more is ceremony or legacy bloat. sizes="any" on the ICO link tells modern browsers “ignore this file and prefer the SVG” — critical for the hybrid to work.
Dark-mode favicons (and why Safari is behind)
A black favicon on a dark browser tab disappears. A white favicon on a light tab disappears. The fix is to embed a CSS media query inside the SVG itself:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<style>
circle { fill: #171717 }
@media (prefers-color-scheme: dark) {
circle { fill: #ffffff }
}
</style>
<circle cx="32" cy="32" r="28"/>
</svg>This works in Chrome, Firefox, and Edge — the browser re-evaluates the SVG styles based on the user OS theme. Safari ignores favicon SVG media queries as of April 2026. The fallback is to pick a neutral base color (medium gray, or a brand color that reads on both light and dark) so the Safari tab is not broken.
PWA manifest icons
If your site is installable as a Progressive Web App, the browser needs two PNGs declared in manifest.webmanifest:
{
"name": "Your App",
"short_name": "App",
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png",
"purpose": "maskable" }
]
}The maskable purpose matters for Android — it tells the OS it can crop your icon into any shape (circle, squircle, rounded square) without breaking. Keep 20% padding around the visible logo so the maskable crop does not cut content.
iOS home screen and apple-touch-icon
When someone taps “Add to Home Screen” in iOS Safari, iOS fetches /apple-touch-icon.png (or /apple-touch-icon-180x180.png, or whatever is declared via <link rel="apple-touch-icon">) and uses it as the app icon on the home screen.
iOS requires a 180×180 PNG without transparencyand without rounded corners — iOS applies the rounded-square mask itself. If you ship a transparent PNG, iOS composites it on a white background automatically, which usually looks fine but can surprise you. For maximum control, flatten to a brand-color background.
Windows pinned sites and the tile.xml corpse
Circa 2012-2019 Windows wanted you to ship browserconfig.xml with tile colors and a dedicated set of PNGs for Internet Explorer 11 pinned sites and Windows 8/10 Start Menu tiles. IE11 died, Windows 11 removed Live Tiles — none of it is needed anymore. Most favicon generators still produce these files out of inertia.
Skip the tile.xml and browserconfig.xml. If you inherited them from an old project, delete them — nothing breaks.
RSS readers, chat previews, and the long tail
The long tail of favicon consumers: Feedly, Reeder, Inoreader, NetNewsWire, Slack link previews, Discord embeds, Microsoft Teams cards, various podcast apps. Behavior is inconsistent — some fetch the SVG, some the ICO, some an Open Graph image. You cannot test them all.
What works reliably across the long tail: a 192×192 PNG served at /icon-192.png, discoverable via Open Graph image meta tag or the manifest. Most readers that cannot parse SVG fall back to this.
How to force a favicon cache refresh
You updated the favicon. It has been an hour. Nothing changed in the browser tab. This is infuriating and universal. Browsers cache favicons for weeks, sometimes months. Clearing the normal browser cache does not clear the favicon cache.
The only reliable fix is a query-string version:
<link rel="icon" href="/favicon.ico?v=2" sizes="any">
<link rel="icon" href="/favicon.svg?v=2" type="image/svg+xml">Bump the version string every time the favicon changes. Some build systems automate this with content hashing (favicon.abc123.ico), which is even better for long-lived caching.
Common pitfalls
- Too-detailed logo at 16×16. Anti-aliasing turns any logo with thin lines into mush at this size. Test the 16×16 render before shipping — simplify if needed.
- Transparent favicon on iOS. Safari composites a white background by default. Intentional-looking or surprising depends on the logo.
- ICO without the 16×16 variant. Some ICO generators default to 32+ only. Browser tabs end up rendering a blurry downscaled 32. Always include 16.
- Missing sizes="any" on the ICO link. Without it, Chrome and Firefox prefer the ICO over the SVG. Your modern browsers miss the SVG benefit.
- SVG with external fonts or images. Favicons load in a restricted context — external resources do not load. Inline everything or convert text to paths.
The full build workflow
- Design the logo as SVG. Square canvas (e.g. 64×64 viewBox) with the logo centered and some padding.
- Test the SVG at 16×16 by scaling it in the browser — if it becomes illegible, simplify.
- Save
public/favicon.svg. - Open SammaPix Favicon Generator, drop the SVG, pick 16/32/48 (+ 64/128/256 optionally), download
favicon.ico. - Run the SVG through SammaPix SVG to PNG at custom width 180, save as
public/apple-touch-icon.png. - (Optional) Same tool at width 192 and 512 for PWA icons.
- Add the four HTML tags to your layout
<head>. - Hard-refresh, confirm the favicon renders on Chrome, Firefox, Safari, and iOS.
Total time: 15 minutes once you know the shape. For reference on format tradeoffs read our complete image format guide and the PNG to JPG vs WebP analysis.
Free browser-based favicon tools
| Goal | Tool | Notes |
|---|---|---|
| Multi-size favicon.ico | Favicon Generator | SVG/PNG/JPG/WebP → 16/32/48/64/128/256 |
| SVG → apple-touch-icon.png | SVG to PNG | Custom width 180 px, transparency preserved |
| Compress the output PNGs | Compress Images | Extra 20-40% reduction on 180/192/512 |
| Convert raster → WebP | WebP Converter | Only for manifest icons if CDN supports WebP |
Full set of 35 tools on the SammaPix homepage.
FAQ
What favicon sizes do I actually need in 2026?
Minimum viable setup is three files: favicon.svg for modern browsers, favicon.ico with 16/32/48 variants, apple-touch-icon.png at 180×180. Add 192×192 and 512×512 PNGs if you ship a PWA.
Can I use a single SVG as my entire favicon?
Modern browsers accept it, but iOS home screen, Windows taskbar, and many RSS readers need ICO or PNG. Ship SVG + ICO + apple-touch-icon for full coverage.
How do I make a favicon that adapts to dark mode?
Embed a CSS media query inside the SVG with prefers-color-scheme dark. Works in Chrome, Firefox, Edge. Safari does not respect it yet — fall back to a neutral color that reads on both themes.
Why does my favicon not update when I change it?
Browsers cache favicons aggressively in a separate long-lived cache. Force refresh with a query-string version bump like href=/favicon.ico?v=2 whenever you change it.
What is the difference between favicon.ico and apple-touch-icon?
favicon.ico is the legacy multi-size container for browser tabs and Windows taskbar. apple-touch-icon is a single 180×180 PNG used by iOS for home screen shortcuts. Both are needed for full coverage.
Can I generate all favicon files from one SVG without installing any tool?
Yes. SammaPix Favicon Generator builds the multi-size ICO. Run the SVG through SVG to PNG at 180 pixels for apple-touch-icon. No upload, no signup.
