IcoJet圖示手記
← 圖示手記

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"
    }
  ]
}
參考資料與延伸閱讀 MDN — Manifest icons ↗web.dev — Web app manifest ↗

返回轉換工具 ↗