New Best Practice
Sign In

Use SVG favicon

Saturday, August 29, 2020

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 <link> element as follows.
<link rel="apple-touch-icon" href="/favicon-512x512.png">

Code Examples

<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">

avoid: multiple PNG sizes

<link rel="icon" type="image/svg+xml" href="/favicon.svg" sizes="any">

do: Use SVG favicon

Instructions

  • Do:

    Specify the sizes attribute with the value any for an SVG icon

  • Consider:

    Including a low and high resolution PNG icon for older browsers that do not support SVG favicons

Brian Love

Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.

Google Developers Expert

Discussions are healthy ❤️