Custom Safari bookmark icon and color on Touch Bar

Question

The Macbook Pro 13 and 15\" laptops have a Touch Bar (interactive display) on the keyboard. All the bookmarks are displayed on the Touch Bar when using Safari. Some websites (li

Answer 1

I have found the answer to my question after a week. Hope this helps someone.

First, you need to create and upload a special vector image of your logo to your website. The vector image needs to be 100% black with a transparent background. Then you need to add a "mask-icon" metatag to your website. You can set a color for your image in this HTML tag. This image is used for the touch bar and also for pinned tabs.

The mask-icon HTML tag:

<link rel="mask-icon" href="website_icon.svg" color="#121212">

Check out the Apple developer docs: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html