Written by David Kim — Frontend & WordPress Developer. I switched a dozen client sites to SVG favicons and never looked back. More about me →
A client asked me last week why their new favicon looked "fuzzy" on their 4K monitor. The PNG was 32×32 pixels being stretched to fit a high-DPI bookmark bar at 64×64 effective resolution. This isn't a niche problem anymore—nearly every new laptop ships with a 2x or 3x display. PNG favicons are hitting a wall they can't scale past. SVG favicons solve this permanently, and they've been supported in every major browser since early 2025.
The HTML spec now explicitly recommends SVG as the preferred favicon format. Chrome's developer blog confirmed full support with dark mode detection. Yet I still see developers shipping six sizes of PNGs for a single favicon. Here's what I've learned switching a dozen client sites from PNG to SVG favicons.
| Feature | PNG | ICO | SVG |
|---|---|---|---|
| File size | 1-4 KB | 5-15 KB | <1 KB |
| Scales to any size | ❌ Fixed pixels | ❌ Multiple bitmaps | ✅ Infinite |
| Dark mode | ❌ Needs media query hack | ❌ No | ✅ prefers-color-scheme |
| Edit with text editor | ❌ Binary | ❌ Binary | ✅ Plain XML |
I ran a quick test on a WordPress site I maintain. The old favicon setup: six PNG files totaling 18KB, plus a 15KB favicon.ico. The replacement: a single 612-byte SVG. That's 33KB down to 612 bytes—a 98% reduction. Multiply by a million visitors and you've saved 32GB of unnecessary transfer. Over a slow 3G connection, the SVG paints instantly while the ICO was still buffering.
Replace this:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
With this:
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
One line. No sizes attribute needed—the SVG renders at whatever resolution the browser requests. The SVG itself looks like this:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<style>
rect { fill: #f59e0b }
@media (prefers-color-scheme: dark) { rect { fill: #fbbf24 } }
</style>
<rect width="100" height="100" rx="20"/>
<text x="50" y="68" text-anchor="middle" fill="white" font-size="56">⚡</text>
</svg>
The prefers-color-scheme media query inside the SVG means the icon automatically swaps colors when the user switches to dark mode. No JavaScript, no extra files, no server-side detection. Firefox implemented this first in 2023, Chrome followed in 2025, and Safari completed the trio in early 2026.
The old advice was to generate at least five sizes: 16×16, 32×32, 48×48, 64×64, and 180×180 for Apple Touch Icon. That's five files, five HTTP requests, five cache entries. An SVG favicon replaces all of them.
I still recommend keeping one 180×180 PNG for the Apple Touch Icon—Safari on iOS sometimes caches SVGs oddly for home screen bookmarks. But for the tab icon, the bookmark bar, the history list, and the address bar, one SVG handles every size. I've tested this across Chrome, Firefox, Safari, and Edge on Windows, macOS, and Android. The SVG renders sharp everywhere.
If you want to generate a clean SVG favicon from any image, genfavicon.org handles the conversion and outputs both the SVG and the fallback PNGs you need.
prefers-color-scheme for dark modeIf your favicon is a photograph or a complex gradient with dozens of paths, stick with PNG. SVGs render as vectors, and vectorizing a photo creates a massive file that defeats the purpose. For logos, icons, and simple shapes, SVG is unbeatable. For photos, PNG at 64×64 still works fine.
Also, if you're supporting browsers from before 2024, include a PNG fallback by placing both link tags in your HTML—modern browsers will pick the SVG, old ones will fall back to PNG. I'd call this optional in 2026.
Written by David Kim — Frontend & WordPress Developer. I switched a dozen client sites to SVG favicons and never looked back. More about me →