Custom Bookmark Icon and Safari Bookmark Color on Touchpad

Question

Macbook Pro 13 and 15 "laptops have a touch screen keyboard (interactive display). All bookmarks are displayed on the touch panel when using Safari. Some websites (like Facebook) show a custom icon with a customizable background color on the touch panel. How do I do it as a web developer?

Do I need to use a special favicon or use special HTML meta tags (for example, og: image) in a specific format?

Example bookmarks on the touch panel:

Answer 1

I found the answer to my question in 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 should be 100% black with a transparent background. Then you need to add the "mask-icon" meta tag to your site. You can set the color for your image in this HTML tag. This image is used for the touch panel as well as for pinned tabs.

Mask HTML tag 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