配合平台調整的應用程式圖示。
什麼是可遮蓋的圖示？
如果您已在近期 Android 手機上安裝漸進式網頁應用程式，可能會注意到圖示以白色背景顯示。Android Oreo 推出了自動調整圖示，可在各種裝置型號上以各種形狀顯示應用程式圖示。未遵循此新格式的圖示將被指定為白色背景。
可遮蓋的圖示是一種新的圖示格式，可讓您進一步控管，並可讓漸進式網頁應用程式使用自動調整圖示。如果您提供可遮蓋的圖示，圖示就能填滿整個形狀，以便在所有 Android 裝置上順利運作。Firefox 和 Chrome 最近新增支援這個新格式，您可以在應用程式中採用此格式。
我目前的圖示是否正確？
由於可遮蓋的圖示需要支援各種形狀，因此您提供不透明圖片，但要加上一些邊框間距，瀏覽器可將其裁剪為所需的形狀和大小。建議您不要依賴任何特定形狀，因為最終形狀會因瀏覽器和平台而異。
幸好，所有平台都會遵循明確定義及標準化的「最低安全區域」。圖示的重要部分 (例如標誌) 應位於圖示中央的圓形區域內，且半徑應與圖示寬度的 40% 相同。外側的 10% 邊緣可能會遭到裁剪。
您可以使用 Chrome 開發人員工具，查看圖示的哪些部分到達安全區域。開啟漸進式網頁應用程式，啟動開發人員工具並前往「Application」面板。在「圖示」部分中，您可以選擇「僅顯示可遮蓋圖示的最小安全區域」。系統將剪輯圖示，只顯示安全區域。如果您的標誌會出現在安全區域，就不用擔心。
如要透過各種 Android 形狀測試可遮蓋的圖示，請使用 Tiger 建立的 Maskable.app 工具。開啟圖示後，Maskable.app 即可試用各種形狀和大小，您也可以與團隊成員分享預覽畫面。
如何採用可遮蓋的圖示？
如要根據現有圖示建立可遮蓋的圖示，可以使用 Maskable.app Editor。上傳圖示並調整顏色和大小，然後匯出圖片。
建立可遮蓋的圖示，並在開發人員工具中進行測試後，您需要更新網頁應用程式資訊清單，使其指向新資產。網頁應用程式資訊清單會以 JSON 檔案提供網頁應用程式相關資訊，並包含 icons 陣列。
加入可遮蓋的圖示時，purpose 欄位會指示瀏覽器如何使用圖示。根據預設，圖示的用途為 "any"。系統會在 Android 的白色背景上調整這些圖示的大小。
{
…
"icons": [
…
{
"src": "path/to/regular_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "any"
},
{
"src": "path/to/maskable_icon.png",
"sizes": "196x196",
"type": "image/png",
"purpose": "maskable" // <-- New property value `"maskable"`
},
…
],
…
}
可遮蓋的圖示應使用不同的 purpose 值："maskable"。這表示圖片是用來與圖示遮罩搭配使用，讓您進一步控管結果。這樣一來，您的圖示就不會採用白色背景。您也可以指定多個以空格分隔的用途 (例如 "any maskable")，以便在不加上遮罩的其他裝置中使用可遮蓋的圖示。
透過這樣，您就可以自行製作可遮蓋的圖示，確保應用程式採用無邊框設計 (還有什麼價值、圓形轉圓、橢圓曲線 💡? 值得注意)。
特別銘謝
本文是由 Joe Medley 審查過的。