SVG favicons that respect theme preference
If you’ve been building web for a while, you probably remember the mess of six million files in your head element just to have a well-supported favicon. This is all over now, and a handful of files should be more than enough. Alleluia! “How to Favicon in 2026” on Evil Martians blog goes in depth into it.
SVG favicons are well supported now! Since this is a vector format, resolution is not a concern, and it can also adapt to user theme preferences. Nothing new here — Thomas Steiner blogged about it 7 years ago. Here is all you need.
<!-- index.html -->
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
<!-- icon.svg -->
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<style>
.bg {
fill: #ffffff;
@media (prefers-color-scheme: dark) {
fill: #000000;
}
}
</style>
<rect x="0" y="0" width="100" height="100" class="bg" />
</svg>
This simple setup solves all the resolution drama, works in most browsers and in theory adapts to user appearance preferences. In practice it is a little bit more complicated.
Here is the preview of the website for the meetup I organise (pop in if you’re near Northampton/UK, you will like it) where I implemented this technique. Google Chrome (top) respects favicon media queries overrides based on the user preferences, but requires a refresh for the new styles to kick in. That’s fine because normal people do not change theme or resolution six times a second like we do (web developers). Firefox (middle) does it best amongst all players and it just works. Safari (bottom) unfortunately ignores media query overrides in the SVG favicon, and renders only the base version regardless of users preferences.
Here is a WebKit bug I submitted. Not a biggie but it would be cool if I could quote Steve Jobs and say “it just works” about SVG favicons. Also folks, please remember that complaining about browser bugs to your colleagues won’t fix the bug. Report it and blog about it to make the Web a better place. Peace ✌️
Thanks for submitting the bug report. I noticed the same issue with Safari recently, and was a bit perplexed.
I also noticed that if you're trying to have a fallback, Chrome and Safari can be a pain. I figured the simplest thing to do would be to also add a classic
favicon.ico, but that made them both ignore the SVG. There are workarounds for Chrome, but they just trick the browser. Which also does not help with Safari. Someone is going to need to write a new "definitive" guide once some of this gets ironed out.It's a shame there's no voting on WebKit Bugzilla.
I'm also surprised that Safari does not properly support this feature. I'm even more shocked because it does support monochrome icons for pinned tabs 🤯
Thank you for the quick, easy, and helpful article, as well as the bug report, Paweł! 🙌🏻
Peace! ✌🏻