lookout.devlookout.dev
search
Share Knowledge
40

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

Instructions

checkmark-circle
Do

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

question-circle
Consider

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

I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.

Google Developers Expert

Have a question or comment?