如果您是在近期的 Android 手機上安裝漸進式網頁應用程式 (PWA)，可能會發現應用程式的圖示具有白色背景。Android 8.0 推出了自動調整圖示，可在各種裝置型號上以各種形狀顯示應用程式圖示。未採用此格式的圖示則會有白色背景。
可遮蓋的圖示是 Chrome 和 Firefox 的一種新圖示格式，可讓漸進式網頁應用程式使用自動調整圖示，並讓您進一步控制圖示的外觀。
我目前的圖示是否正確？
由於可遮蓋的圖示需要支援各種形狀，因此您必須提供含有邊框間距的不透明圖片，讓瀏覽器可以針對任何瀏覽器或平台，將其裁剪為所需的形狀和大小。
可遮蓋的圖示規格提供所有平台都會遵循的標準化「最低安全區域」。圖示的重要部分 (例如標誌) 必須位於圖示中央的圓形區域內，且半徑必須等於圖示寬度的 40%。部分平台上的外側 10% 邊緣可能會遭到裁剪。
您可以使用 Chrome 開發人員工具，查看圖示的哪些部分位於安全區域內。開啟漸進式網頁應用程式，啟動開發人員工具並前往「Application」面板。在「圖示」部分中，您可以選擇「僅顯示可遮蓋圖示的最小安全區域」。這會移除圖示，只顯示安全區域。如果您的標誌可以在安全區域內顯示 表示圖示已就緒
如要在各種 Android 形狀上測試可遮蓋的圖示，請使用 Tiger Oakes 的 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 審查的。