How to Add Your Websites Favicon to the MacBook Pro’s Touchbar

img_0595

This one took me some time to figure out but thought it would be useful to share.  If you run a website there is a way to have your favicon show up correctly on the Mac Book Pro with Touch Bar.

Although it is not documented, the icons used in the touch bar for Favicon are the same as the Safari pinned tab icon.

First of all, you need a black and white SVG of your logo in a 45×45 pixel layout uploaded to the root directory of your site.

Then, in the header of your website you need to add the following code:

<link rel="mask-icon" href="https://pingie.com/PingieLogoNEWSVG.svg" color="#5bbad5">

Replace the Pingie URL in the HREF with the link to the SVG you uploaded to your website.