Adding a Touch Bar Icon to Your Website
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.
<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.
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" >