Web、PWA 與 Chrome 圖示

Web ZIP 包含 favicon.ico、16/32 px PNG、180 px Apple touch 圖示、192/512 px PWA 圖示、site.webmanifest 與 1200x630 的 og.png。

Web ZIP 檔案說明

兩張 PWA PNG 是一般正方形圖示，檔名與尺寸對應 site.webmanifest 的 icons 陣列；og.png 是獨立的分享圖片。

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

將圖示接入網站

1. 將 Web 內的檔案複製到網站公開目錄並發布至網域根路徑，或依所選目錄調整引用。
2. 修改 site.webmanifest 的 name 與 short_name。start_url 與 scope 相對於 manifest 所在位置；匯出的圖示路徑以 / 開頭。圖示放在子目錄時，請修改這些路徑。
3. 在 HTML head 加入 manifest、favicon 與 Apple touch 引用。使用 HTTPS 或 localhost。在瀏覽器開發工具中檢查 manifest，確認每個圖示 URL 回傳圖片，而非 HTML 備援頁面。

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

這些圖示未按 maskable 素材設計。ZIP 不加入 service worker 或離線功能，只有圖示不能保證可安裝。請在目標瀏覽器與裝置上測試。

Favicon 和 PWA 圖標生成器

匯出 Chrome 擴充圖示與宣傳圖片

上傳現有素材並選擇 Chrome，即可下載圖示 PNG 與矩形宣傳圖。宣傳圖將素材置中放在白色畫布上，提交商店前請完成設計檢查。

• 擴充功能圖示：16、32、48、128 px PNG，以及 Manifest V3 起始檔案。
• 商店圖示（128x128）：用於 Chrome Web Store 頁面的獨立 PNG。
• 小宣傳圖（440x280）：用於商店小宣傳版位的不透明 PNG。
• Marquee（1400x560）：選用的大宣傳圖，與商店截圖不同。
• 商店截圖：請另行擷取真實擴充介面，尺寸為 1280x800 或 640x400。此工具不擷取畫面，也不加入截圖邊框。

Chrome 擴充圖示與商店圖片產生器

官方參考

• Web App Manifest
• Chrome Web Store