Safari Pinned Tab Icon (mask-icon)
Safari on macOS uses a dedicated icon for pinned tabs, declared with <link rel="mask-icon" href="..." color="#...">. The file is a single-colour SVG made of solid black shapes on a transparent background, and Safari recolours it using the color attribute. It is separate from your normal favicon and only affects pinned tabs in desktop Safari.
A monochrome SVG, recoloured by Safari
A mask-icon isn't a normal coloured graphic. Safari treats it as a mask: you supply solid black shapes on a transparent background, and it fills them with the colour from the tag's color attribute, one colour when pinned, another on hover. Gradients, multiple colours, and strokes are all flattened, so the artwork has to read as a single silhouette.
It only drives pinned tabs in desktop Safari. Newer Safari versions also fall back to your regular SVG or PNG favicon, which is why many sites no longer ship a separate mask-icon at all.
Declaring it
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#111111" />The color attribute is what Safari paints the black shapes with when the tab is pinned.
Safari pinned tab FAQ
Do I still need a mask-icon?
Rarely. Modern Safari falls back to your SVG or PNG favicon for pinned tabs, so a separate mask-icon is now a nicety rather than a requirement.
Why is my pinned tab icon a solid blob?
Because Safari flattens the mask-icon to a single silhouette and fills it with the color attribute. Any detail carried by colour or gradient is lost. The shapes themselves have to define the mark.
What format does the pinned tab icon need?
An SVG of solid black paths on a transparent background. Not a PNG, and not a multi-colour SVG. Safari uses the geometry only and applies its own colour.