PWA 圖示 manifest 排錯：路徑、實際檔案與安裝快取
檢查部署後的 manifest、圖片響應、真實尺寸和已安裝應用快取，區分標籤頁 favicon 與 PWA 安裝圖示更新問題。
PWA 圖示不更新時，先檢查瀏覽器真正收到的 manifest 和圖片 URL。更換標籤頁 favicon，不一定會替換已安裝應用的圖示，因為它們可能來自不同宣告與快取。
Favicon/PWA 產生器準備圖片和起始 manifest。把輸出部署進網站後，仍需讓路徑與實際釋出的檔案一致。
插圖：原創產生的概念示意，不是介面截圖、客戶結果或平台驗收紀錄。
區分標籤頁與安裝圖示
HTML 的 favicon 宣告用於標籤頁，manifest 的 icons 條目描述 Web 應用圖示。因此，頁面可能顯示新標籤圖，已安裝的快捷方式卻仍保留舊圖片。
先記錄問題發生在哪裡：標籤頁、安裝提示、應用啟動器，還是已經安裝的應用。再寫下瀏覽器與作業系統，才能把“圖示壞了”變成可復現任務。
找到頁面實際引用的 manifest
檢查頁面的 manifest 連結，直接開啟 URL。確認響應是預期 JSON，不是登入頁、重定向迴圈或通用 HTML 回退。應看部署響應，而不只看編輯器裡的檔案。
當前產生器輸出 Web/site.webmanifest、android-chrome-192x192.png 和 android-chrome-512x512.png。起始模板使用站點根相對路徑；如果把圖片部署進其他目錄，就要更新引用，不能仍指向不存在的根檔案。
逐個開啟圖片 URL
MDN 的 manifest 圖示參考說明 src、sizes、type 與 purpose 的含義。相對路徑以 manifest URL 為基準，而 / 開頭的路徑從站點根開始。
開啟每張被宣告的圖片，核對響應。即使 URL 以 .png 結尾，錯誤頁面也不是有效圖片。能在本地開啟的檔案，仍可能沒部署成功，或被頁面的圖片策略阻止。
將宣告尺寸與真實影象比較。產生後又縮放了圖片，就應同時更新條目。檔名包含 192 或 512，不等於它真的具有該尺寸。
只宣告素材支援的用途
當前輸出是普通圖示流程，不產生單獨經過測試的 maskable 影象。給現有條目加 purpose: "maskable"，不會自動重新設計安全區。
需要 maskable 素材時，按用途準備並檢查裁切，必要時也保留普通圖示。用尺寸指南核對已產生的輸出，再檢視目標瀏覽器的安裝要求。
已在瀏覽器檢查的 manifest 與圖示範例
2026 年 10 月 1 日，本機 Chrome 154 開啟包含目前匯出 manifest 與圖示檔案的原創測試站點。manifest 回傳 200，類型為 application/manifest+json；相對位址 start_url 與 scope 解析為測試站點根目錄。兩張圖示皆回傳 200，瀏覽器點陣圖解碼確認尺寸為 192 × 192 與 512 × 512 畫素。favicon 與 Apple touch icon 宣告也已分別檢查。
在解壓後的範例目錄執行以下命令，再開啟 http://localhost:8892/。若將檔案放入子目錄，請更新從根目錄開始的圖示 URL。
python3 -m http.server 8892 --bind localhost本次驗證了解析、回應與圖像解碼。未觀察到安裝推廣事件或完成安裝，standalone 顯示為 false。範例不提供 maskable 圖稿或 service worker，實際安裝仍需單獨測試。
先觀察瀏覽器，再清空資料
開啟瀏覽器的應用或 manifest 檢查工具，觀察解析後的內容、圖示預覽和請求錯誤，再看 manifest 與圖片的網路響應。這樣能區分路徑錯誤和快取響應。
對於可丟棄資料的測試安裝，可在確認新資源後移除並重新安裝。如果清理站點資料，要理解它可能刪除應用本地資料。先做有目標的檢查，而不是為排錯清空真實使用者的內容。
使用明確版本的圖片 URL，有助於跟蹤部署與快取。更新引用並記錄安裝的是哪一版，不要讓每次請求都產生隨機地址；穩定的版本資源更容易快取與診斷。
單獨驗證安裝流程
MDN 的安裝指南介紹更廣泛的要求。有效圖示只是流程的一部分，圖示匯出並不能讓任何網站都在所有裝置上安裝。
使用受控測試站點、真實部署的 manifest 和目標瀏覽器。分別記錄 manifest 載入、圖片獲取和安裝呈現。桌面檢查不能寫成手機安裝測試。
一次實際的 Safari 安裝
2026 年 10 月 2 日，同一測試網站已透過隔離的 iPhone 17 模擬器、iOS 26.5 Safari 加入主畫面，並啟用「作為網頁 App 打開」。My App 圖示使用原始 XY 圖案；點擊後，測試網站在獨立 Web 應用中開啟，沒有 Safari 網址列。這驗證了該本機 Safari 流程，不代表 Chromium 安裝、離線能力或實機表現。
依照 Apple 的 Safari 操作說明，開啟網站，依序選擇更多 → 分享 → 加入主畫面，保持「作為網頁 App 打開」開啟，再點加入。隨後點擊新圖示，核對圖案與目的網址。測試網站仍未提供 service worker 或專用 maskable 圖案。
常見問題
標籤頁更新了，安裝圖示為什麼沒變？
核對 favicon 與 manifest 的獨立宣告，再檢查已有安裝的快取。新 favicon 可能正確，但 manifest 仍引用另一檔案。
只改檔名來匹配 manifest 可以嗎？
可以對齊名稱，但還要檢查真實格式與尺寸。改名不等於轉換或縮放。
所有瀏覽器會顯示完全一樣嗎？
不會。安裝介面與圖示用途支援存在差異，應驗證目標瀏覽器和裝置。
完成可復現檢查
確認 manifest URL，跟蹤圖片引用，核對實際檔案，再測試全新的可丟棄安裝。需要替換圖片時回到 PWA 產生器。
更多文章
通訊
保持更新
將最新的應用設計技巧和圖標趨勢發送到您的收件箱。