How to Make a Safari Pinned Tab SVG Icon
Build the single-color SVG mask icon Safari requires for pinned tabs and the Touch Bar.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Mask Icon Format
Safari pinned tabs use a special monochrome SVG referenced via <link rel='mask-icon'>. It must be a single solid black path on a 0 0 16 16 viewBox with no colors or strokes — Safari applies the user's accent color via the mask.
- Use a single solid black fill, no other colors
- Set viewBox to '0 0 16 16' for correct sizing
- Flatten strokes to filled paths before exporting
Converting Your Logo
Convert your logo to SVG, then simplify it to one solid silhouette. Reference it with <link rel='mask-icon' href='/icon.svg' color='#5bbad5'> where color is your brand accent.
- Convert the logo to a one-color silhouette SVG
- Add the mask-icon link with a color attribute
- Test in Safari's pinned tab bar at small size
Frequently Asked Questions
Why must a Safari pinned tab icon be one color?
Safari treats it as a mask and recolors it with the user's accent or your specified color, so any internal colors are ignored.
What viewBox should a Safari mask icon use?
Use '0 0 16 16' — Safari expects the path drawn within a 16x16 coordinate space for proper rendering.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG