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 (like Facebook) show a custom icon with a custom background color on the Touch Bar. How do I do this as a web developer?

Do I need to use a special Favicon, or use special HTML meta-tags (like og:image) in a specific image format?

Bookmarks example on the Touch Bar:

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