How to correctly load SVG favicons

Written by Stefan Judis
Published at
Updated at
Reading time
1min

Here's a quick snippet I found on CSS Tricks for later use.

SVG favicons are almost cross-browser supported. Unfortunately, Safari is not ready yet, and that's why we still need to define an ico favicon. Use the sizes="any" attibute to avoid Chromium browsers loading both favicon files (ico and svg).

<!-- Avoid that Chromiums download ico and svg 👇 -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
If you enjoyed this article...

Join 5.4k readers and learn something new every week with Web Weekly.

Web Weekly — Your friendly Web Dev newsletter
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles