Safari Pinned Tab “mask‑icon” (SVG) from Your Logo

October 1, 2025 – by Axialis Team

Safari supports a special monochrome icon for Pinned Tabs via <link rel="mask-icon">. You provide a pure‑black SVG (transparent background), then pick the tab color using the color attribute. Apple’s guide shows the exact markup; they recommend a single‑layer SVG and a viewBox of 0 0 16 16.

Note. Since Safari 12, pinned tabs can fall back to a regular favicon, so a mask‑icon is optional—but adding one still gives you full control over the appearance and color in Safari.

What you’ll do

Prepare a pure‑black vector glyph (no extra colors; transparent background).
Export a minified SVG with a proper viewBox in IconVectors.
Add a mask‑icon link tag with your brand color and verify in Safari.

Step‑by‑step in IconVectors

Prepare a pure‑black glyph
- Open/Create: File → Open… (Ctrl+O) or New Icon (Ctrl+N).
- Flatten your logo to a single layer/path and set fills/strokes to black on a transparent background.
- Set the root SVG to viewBox="0 0 16 16" (Apple’s guidance for pinned‑tab templates).
Keep the shape bold and centered; tiny details can disappear at pinned‑tab size.
Export Minified SVG
Choose File → Export → Export Minified (Shift+Ctrl+M). This writes a compact .svg with the right viewBox and no extra metadata—perfect for a mask‑icon.
Add the link tag with your brand color
Place this in your document’s <head> (update the path/color):
```
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0ea5e9">
```
The color sets the display color of the black SVG. Apple accepts hex, RGB, or color keywords.
Verify in Safari & handle fallbacks
- Open your site in Safari, pin the tab (Control‑click a tab → Pin Tab), and confirm the icon matches your brand color.
- If you don’t ship a mask‑icon, Safari can use your normal favicon for pinned tabs (Safari 12+). Mask‑icon remains useful if you want explicit branding.
- If the icon doesn’t update, unpin/re‑pin; in stubborn cases, clear the cached “Template Icons” folder as noted by community workarounds.

Troubleshooting

Icon shows as a letter — ensure your SVG is 100% black, single layer, with viewBox="0 0 16 16", and the file path in href is correct.
Color looks wrong — avoid very light colors (white/yellow/very light gray); Apple recommends darker tones for contrast.

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

Version 1.10 - September 17, 2025