html


ON: BY: Christopher Hannah

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.

Radical Thinker Touch Bar Icon

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"
>