PWA 圖示被裁切或縮成小白塊?
安裝後的網頁應用需要 manifest 圖示,啟動器的形狀遮罩也會改變呈現。
準備應用素材
可從 192×192、512×512 PNG 開始,再核對平台要求。相對圖示路徑以 manifest 網址為準。IcoJet 最大輸出 256px,不能取代 512px PNG。
設計 maskable 版本
重要圖案放在中央、半徑為圖寬 40% 的圓形安全區,背景延伸到邊緣。只有驗證過遮罩的素材才標記 purpose="maskable"。
實際安裝驗證
用瀏覽器檢查 manifest 與遮罩預覽,再在目標裝置安裝。確認普通及 maskable 版本和檔案路徑。舊安裝異常時,先與全新測試安裝比較。
{
"icons": [
{
"src": "/icons/app-192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icons/app-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/app-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}