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:

1. Create a file named apple-touch-icon at the root of your website, or
2. 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.