---
title: "mask-icon · Link relation · zhead"
canonical_url: "https://zhead.dev/link/mask-icon"
last_updated: "2026-08-19T02:35:55.704Z"
meta:
  description: "A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type."
  "og:description": "A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type."
  "og:title": "mask-icon · Link relation · zhead"
---

Link

# mask-icon

A Safari-specific relation for the monochrome SVG used by pinned tabs. It is registered by IANA but is not a built-in HTML Living Standard link type.

## Code examples

Good example

```
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5b21b6">
```

Links Safari to an SVG mask and supplies its display color.

Avoid this example

```
<link rel="mask-icon" href="/safari-pinned-tab.png">
```

Uses a PNG, but Safari's pinned tab mask format is SVG.

## Recommendations

- 01 Follow Safari's SVG constraints Use one black layer on a transparent background and set the SVG viewBox to "0 0 16 16".
- 02 Set a suitable color The color attribute sets Safari's display color for the mask. Choose a dark enough color to remain visible against the browser interface.
- 03 Also provide a standard icon Other browsers use rel="icon". Safari 26 also supports SVG files through the standard icon relation.

## Related documentation

- [Apple Developer: PinnedTabs](https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html)
- [IANA: Link Relations](https://www.iana.org/assignments/link-relations/link-relations.xhtml)