Safari Pinned Tab Mask Icon from SVG

By the Axialis Engineering team · Updated June 25, 2026

When a user pins your site in Safari, the favicon often renders as a muddy, off-color shape in the pinned tab. A Safari mask-icon fixes that: you ship one pure-black SVG glyph plus a single color value, and Safari draws a crisp, on-brand tab icon. This guide takes a logo from artwork to a working <link rel="mask-icon"> using IconVectors.

Apple's documentation imposes two rules: the SVG must be a single layer of 100% black on a transparent background, and it should use viewBox="0 0 16 16". A mask-icon is optional because Safari can fall back to your regular favicon (Safari 12 and later), but shipping one is the only way to control the exact tab color.

What you'll do

Prepare a pure-black, single-layer glyph on a transparent background.
Export a minified SVG with a 0 0 16 16 viewBox in IconVectors.
Add the mask-icon link tag with your brand color and verify it in Safari.

Step-by-step in IconVectors

Prepare a pure-black glyph
- Open an existing logo with File -> Open... (Ctrl+O), or start fresh with New Icon (Ctrl+N).
- Flatten the logo to a single layer/path and set every fill and stroke to black on a transparent background. Any non-black color is ignored by Safari, so leftover hues just add weight.
- Set the root SVG to viewBox="0 0 16 16", which is Apple's reference size for pinned-tab templates. Keep the shape bold and centered; thin details vanish at pinned-tab scale.
Keep the shape bold and centered; tiny details disappear at pinned-tab size.
Export the minified SVG
Choose File -> Export -> Export Minified (Shift+Ctrl+M). This writes a compact .svg that keeps your viewBox and drops editor metadata, which is exactly what a mask-icon should contain. Save it as safari-pinned-tab.svg at your site root.
Add the link tag with your brand color
Place this in your document's <head>, updating the path and color to match your site:
```
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ea5e9">
```
The color attribute sets the display color of the black glyph. Safari accepts a hex value, an RGB value, or a CSS color keyword.
Verify in Safari and handle fallbacks
- Open the site in Safari, pin the tab (Control-click a tab, then choose Pin Tab), and confirm the icon picks up your brand color.
- If you skip the mask-icon, Safari 12 and later fall back to your normal favicon for pinned tabs. The mask-icon is what gives you an explicit, single-color brand mark instead.
- If the icon does not update, unpin and re-pin the tab. When it stays cached, clearing Safari's "Template Icons" folder forces a refresh.

Troubleshooting

Icon shows as a letter - Safari is falling back to the text glyph. Confirm the SVG is 100% black on a single layer, uses viewBox="0 0 16 16", and that the href path resolves.
Color looks washed out - very light values (white, yellow, pale gray) read poorly against Safari's tab background. Pick a darker brand tone for contrast.

Related guides

Start Making SVG Icons Today with IconVectors

Download the fully-functional 30‑Day Free Trial and unlock your icon design workflow.

for Windows x64 for Windows x86 for macOS for Linux x64

Version 1.70 for Windows and macOS