Use SVG favicon
Saturday, August 29, 2020
Use SVG favicon
What size image should I use for my favicon? How many sizes do I need? What format? What about browser support? 😤
tldr;
Use SVG for your web site's favicon for scalability with broad browser support.
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">
Browser Support
SVG favicon is widely supported by modern browsers.
Of course, Internet Explorer 11 and older browsers do not support SVG favicons. If you need to support older browser I recommend that you include a few additional PNG images:
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512x512.png">
Safari Web Clip
If you also need to support Safari's web clip feature, and your website is not a Progressive Web Application, then you have two options:
- Create a file named
apple-touch-iconat the root of your website, or - explicitly declare the
<link>element as follows.
<link rel="apple-touch-icon" href="/favicon-512x512.png">
Instructions
Specify the sizes attribute with the value any for an SVG icon
Including a low and high resolution PNG icon for older browsers that do not support SVG favicons
Code Examples
Use SVG favicon
<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">multiple PNG sizes
<link rel="icon" type="image/png" sizes="558x558" href="/favicon-558x558.png">
<link rel="icon" type="image/png" sizes="270x270" href="/favicon-270x270.png">
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128x128.png">
<link rel="icon" type="image/png" sizes="114x114" href="/favicon-114x114.png">
<link rel="icon" type="image/png" sizes="72x72" href="/favicon-72x72.png">
<link rel="icon" type="image/png" sizes="57x57" href="/favicon-57x57.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.
Have a question or comment?