如果您在近期的 Android 手機上安裝漸進式網頁應用程式 (PWA)，可能會發現應用程式圖示的背景為白色。Android 8.0 推出了自動調整圖示，可在不同裝置型號上以各種形狀顯示應用程式圖示。如果是非採用這種格式的圖示，則圖示的背景為白色。
可遮罩的圖示是 Chrome 和 Firefox 的新圖示格式，可讓漸進式網頁應用程式使用自適應圖示，並讓您更全面地控管圖示的外觀。
目前的圖示是否已就緒？
由於可遮罩的圖示需要支援各種形狀，因此您必須提供不透明圖片，並加上一些邊距，讓瀏覽器可以將圖片裁剪為任何瀏覽器或平台所需的形狀和大小。
可遮蓋圖示規格包含所有平台都會遵循的標準化「最小安全區域」。圖示的重要部分 (例如標誌) 必須位於圖示中央的圓形區域內，圓形半徑必須等於圖示寬度的 40%。在某些平台上，外側 10% 的邊緣可能會遭到裁剪。
您可以使用 Chrome 開發人員工具檢查圖示的哪些部分位於安全區內。開啟漸進式網頁應用程式後，請啟動開發人員工具，然後前往「Application」面板。在「Icons」部分，您可以選擇「僅顯示可遮蓋圖示的最小安全區域」。這會裁剪圖示，只顯示安全區域。如果標誌位於安全區域內，表示圖示已就緒。
如要測試各種 Android 形狀的可遮蓋圖示，請使用 Tiger Oakes 的 Maskable.app。開啟圖示後，您可以開啟 Maskable.app，然後嘗試各種形狀和大小，並與團隊分享預覽。
如何採用可遮蓋的圖示？
如要根據現有圖示建立可遮罩圖示，您可以使用 Maskable.app 編輯器。上傳圖示、調整顏色和大小，然後匯出圖片。
建立可遮罩的圖示並在 DevTools 中測試後，您需要更新網頁應用程式資訊清單，指向新的素材資源。網路應用程式資訊清單會在 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 審查。