觸摸欄上的自定義Safari書籤圖標和顏色

Question

Macbook Pro 13和15「筆記本電腦在鍵盤上有一個Touch Bar（交互式顯示），所有書籤在使用Safari時都會顯示在Touch Bar上，某些網站（如Facebook ）在觸摸欄上顯示自定義背景顏色的自定義圖標我如何以Web開發人員身份執行此操作？

是否需要使用特殊的Favicon或使用特殊的HTML元標記（如og：image ）在一個特定的圖像格式

在觸摸條

書籤呢？例如：

Answer 1

我在一週後找到了我的問題的答案。希望這可以幫助某人。

首先，您需要創建並上傳徽標的特殊矢量圖像到您的網站。矢量圖像需要具有100％黑色和透明背景。然後，您需要在您的網站上添加一個「蒙版圖標」元標記。您可以在此HTML標記中爲圖片設置顏色。此圖像用於觸摸欄以及固定選項卡。

面具圖標HTML標記：

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

退房蘋果開發者文檔： https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html