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">
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 7 days ago.
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