With the MacBook Pro’s new Touch Bar, you can now create your own favicon that will appear there when a user sets it as a bookmark. The same file is also use to create an alpha mask when adding your website as a Pinned Tab.
It’s a small bit of code, that you add to your <HEAD> section, just by your other favicons.
Just specify that it is a “mask-icon”, add the location for the file (has to be SVG), and then specify a colour to be used. The colour is the background on the Touch Bar icon, and it’s also the colour used in the Pinned Tab mask.
Code:
<link
rel="mask-icon"
href="safari-pinned-tab.svg"
color="#dc7604"
>
As an example, you can see the new touch bar icon I made for Radical Thinker.
If you haven’t already, you can also set an icon for when a user adds your website to their home screen on iOS. This is done similarly, but doesn’t have to be an SVG.
Code:
<link
rel="apple-touch-icon"
sizes="180x180"
href="apple-touch-icon.png"
>