DEV Community 👩‍💻👨‍💻

Brian Love
Brian Love

Posted on • Updated on • Originally published at lookout.dev

Use SVG for 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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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)

🌚 Life is too short to browse without dark mode