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 element as follows.
<link rel="apple-touch-icon" href="/favicon-512x512.png">
That's it! Check out more of my lookouts on lookout.dev where I learn in public.
Contact my company for angular consulting and react consulting services.
Top comments (0)