Open Converter
Safari pinned tab icon (mask-icon)
Author: Augusto Cesar Perin • Updated: Sep 30, 2025
Add a Safari pinned tab icon with link rel="mask-icon". Use a monochrome SVG and choose a mask-icon color. IcoSmith can export the SVG and your full favicon set.
How to add
Generate your favicon set (ICO + PNGs). Prepare a simple monochrome SVG for Safari.
Place safari-pinned-tab.svg in /public.
Add this to your <head>:
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a">
FAQ
How do I add a Safari pinned tab icon (mask-icon)? Add <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#0f172a"> inside your <head>.
Which SVG works best for mask-icon? Prefer a single-color fill (no strokes/gradients) and keep margins so it doesn’t clip at 16–32 px.
Tips
Prefer single color fills; avoid strokes and gradients.
Keep margins so the shape doesn't clip at 16–32 px.
Test on both light and dark backgrounds.
Common mistakes
Using a multicolor SVG or thin strokes that vanish at small sizes.
Forgetting the color attribute: pinned tabs render monochrome using this value.
Shipping only a mask icon without an ICO/PNG set for other contexts.
Validation
Check Network tab for 200 on safari-pinned-tab.svg and no CSP errors.
Pin the tab in Safari (macOS) and verify contrast in light/dark appearance.
Run Lighthouse; ensure no 404s and icons are cached.
Open Converter