Are you using SVG favicons yet? A guide for modern browsers.

Antoine Boulanger
Apr 19 · 3 min read
Image for post
Image for post

You should be using SVG favicons. They’re supported in all modern browsers right now.

Also, you probably don’t need all these icon links and sizes you’re copying from projects to projects. Let’s find out what’s the absolute minimum required, word by word.

Image for post
Image for post

Icon

The main favicon can be an SVG of any size. The type type=”image/svg+xml” is unnecessary.

<link rel="icon" href="favicon.svg">

Mask icon

For Safari, it’s a bit different. You need to add a mask-icon. It’s also an SVG, but it has to be made of a single colour and placed on a transparent background. The browser adds the colour of the attribute.

<link rel=”mask-icon” href=”mask-icon.svg” color=”#000000">

Touch icon

The icon for iOS devices as well as favourites from browsers new tab page and more. You only need the 180 x 180 size, and the sizes attribute is superfluous.

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Manifest

The manifest.json provides information about your web app or website. These lines are mandatory to pass Lighthouse’s test. The icon linked is used by Android and Chrome. The largest size 512 x 512 is the only one needed.

{
"name": "Starter",
"short_name": "Starter",
"icons": [{
"src": "google-touch-icon.png",
"sizes": "512x512"
}],
"background_color": "#ffffff",
"theme_color": "#ffffff",
"display": "fullscreen"
}

The theme-color meta is still required for Android’s Chrome browser colour.

<meta name="theme-color" content="#ffffff">

Done

That’s it, that’s all the icons you need for the current modern browsers, everything else is unnecessary. The msapplication-TileImage can be added if you want a different icon in Windows tiles otherwise the apple-touch-icon is used. The TileColor isn’t used anymore.

Everything else

Sadly, not everyone is on modern browsers yet BUT it can be easily resolved by dropping a 32 x 32 favicon.ico at the root of your website. This works everywhere else, even at your grandma’s.

Image for post
Image for post

Dark mode

To finish, here’s a tip for dark mode. One of the benefits of an SVG favicon is that you can change the colour with CSS. Using the prefers-color-scheme media query, the colour of your favicon changes with the users dark or light mode. This method won’t work with the mask-icon since the colour is in the attribute but Safari adds a white background if there isn’t enough contrast.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
<style>
path {
fill: #000;
}
@media (prefers-color-scheme: dark) {
path {
fill: #fff;
}
}
</style>
<path fill-rule="evenodd" d="M0 0h16v16H0z"/>
</svg>
Image for post
Image for post

Result

Here’s the final result. Copy this in the <head> of your website and don’t forget to place a favicon.ico at the root. ✌️

<meta name="theme-color" content="#ffffff">
<link rel="icon" href="favicon.svg">
<link rel="mask-icon" href="mask-icon.svg" color="#000000">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="manifest" href="manifest.json">

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store