28th November 2016

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

2 responses to “Adding a Touch Bar Icon to Your Website”

  1. Philipp Englschall says:

    Hi,

    what size did you use for your Touch Bar icon?

    Best regards,
    Philipp

Leave a Reply

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Learn More)