---
title: Safari Pinned Tab Icon (mask-icon)
description: Safari pinned tabs use a monochrome SVG declared with rel="mask-icon". What the file must look like, the color attribute, and whether it still matters.
canonical: https://favicontools.com/glossary/safari-pinned-tab
---

# 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

```html
<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.

> **Optional, and Safari-only:** No other browser uses mask-icon, and recent Safari falls back to your standard favicon. Ship it only if pinned tabs are a meaningful surface for your audience, and design a mark that survives being reduced to one flat silhouette.

## 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.