Chris Hannah

TouchBar

Touch Bar Apps!

So I made another video!

It shows a few of the many Touch Bar apps that have been released, but these ones are clearly the best 😉.

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.

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