<zhead>

Link

mask-icon

Learn how to use the mask-icon rel link tag to improve your site.

The mask-icon link element is used to define an image that serves as a mask icon for use in Safari on macOS and iOS. This icon is displayed on pinned tabs and can be designed to harmonize with the UI in Safari, allowing for a more branded browsing experience.

Code Examples

<link rel="mask-icon" href="/path/to/icon.svg" color="#000000">
Correctly specifies the mask icon with a defined color attribute for the SVG.
<link rel="mask-icon" href="/path/to/icon.svg">
Omits the color attribute, losing the opportunity to specify the icon color, resulting in a default color that might not match the branding.

Recommendations

  • 01
    Ensure Proper SVG Fill
    Use a single color (typically black) for your mask icon SVG and ensure all areas intended to be transparent are set as such. Safari uses the fill color as the icon color.
  • 02
    Specify a Color
    Always include the color attribute within your mask-icon link tag. This defines the display color of your SVG icon in Safari's pinned tabs.

Related Documentation