For a minimal configuration of site favicon, there should be at least two link tags in head section:

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

favicon.ico should be 48 x 48 px

apple-touch-icon.png should larger than 180 x 180 px (I’m using 192 px)

This two size constant is used in MDN Web Docs.

Unless you know the difference between browsers, I suggest removing the alpha channel and padding of the favicon and using an opaque one for a better visual effect. The reason is different browsers’ favicon background color was not always identical. Here is a comparison of the two configurations.


Additional Configure

Mask icon is a Safari-only feature. When the mask icon is configured, it will replace Safari tab icon.


To use mask icon in Safari, create an SVG icon file and add tag below to HTML head section:

<link rel="mask-icon" href="/favicon.svg" color="#fff">


The color of the mask icon should preferably not be pure black so that Safari will set the background color to white, which looks better when using dark mode. color="#fff" in link tag will be the color that fills the transparent area of the image.

For more information about mask icon, you can read Creating Pinned Tab Icons - Apple.