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-icon
at 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">
Have a question or comment?