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.
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 7 days ago.
Related Topics
Related Articles
- A web component to make your text sparkle
- Self-closing tags are mostly meaningless in HTML
- Safari allows to configure password autofilling
- Should responsive images work with container queries?
- The missing bridge in web development – JSON forms
About the author
Frontend nerd with over ten years of experience, "Today I Learned" blogger, conference speaker, Tiny helpers maintainer, and DevRel at Checkly.