Safari Pinned Tab Icon

Checks that a mask icon is defined and formatted correctly.

One of the features that Apple introduced with Safari 9.0 was pinned tabs. This is a way to keep your favorite sites open all the time, even when restarting the web browser. Each pinned tab has an icon to represent the website. The default is to use the first letter of the website's name, but this can be customized by creating a special SVG image and declaring it in the HTML. This isn't a normal SVG image, it must have black shapes with a transparent background. You can customize the color by using the color attribute on the <link> tag. Here is the recommended code to add to the <head> section of a website. As of Safari 12, regular favicons will work for pinned tabs, so this special mask-icon isn't strictly necessary anymore.

<link rel="mask-icon" href="/safari-pinned-tab.svg" color="red">

This test will check for the presence of a <link> tag and then download the image to make sure it exists.

For more information, please read the documentation on Apple's Developer Website.

Ready to validate your website for this test and 100+ others?