PWA 圖標生成器

幾秒鐘生成 Progressive Web App 圖標

漸進式 Web 應用（PWA）需要符合規範的圖標尺寸以及有效的 web app manifest。使用本工具，你只要上傳一次圖片，就能自動生成所有必需的 PWA 圖標和可直接使用的 site.webmanifest 檔案。

什麼是 PWA 圖標？

PWA 圖標是在使用者將網站「安裝」為應用時所顯示的應用程式圖標，用來讓 Web App 在各種系統中具有接近原生應用的呈現效果。這些圖標會出現在多個位置：

• Android 主畫面
• 應用啟動器 / 應用列表
• 多工切換畫面
• 啟動畫面 / Splash Screen

規範的 PWA 圖標可以讓你的 Web 應用在各裝置上看起來更專業、一致。

PWA 推薦圖標尺寸（Google 建議）

Android Chrome 圖標尺寸

• 192x192 —— 用於主畫面圖標
• 512x512 —— 用於應用啟動器與啟動畫面

這些尺寸是通過 PWA 安裝檢查所必需的，缺少會在 Lighthouse 或瀏覽器檢查工具中顯示警告。

我們為你生成的檔案

圖標檔案

• android-chrome-192x192.png
• android-chrome-512x512.png

Manifest 設定檔

• site.webmanifest（預先設定，可直接引用）

範例：

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

為什麼選擇 favicon.pub 生成 PWA 圖標

• 符合 Google 要求的圖標尺寸
• 自動生成 Web App Manifest 檔案
• 免去手動裁切與輸出多尺寸圖標
• 相容 PNG、JPG、SVG 等多種來源格式
• 免費、立即下載

如何將 PWA 圖標接入你的网站

1. 上傳你的 Logo 或應用圖標。
2. 下載生成好的 PWA 圖標與 manifest 檔案。
3. 將檔案放入網站根目錄。
4. 在 HTML 中加入指向 manifest 的連結標籤。

<link rel="manifest" href="/site.webmanifest">

PWA 圖標 vs 瀏覽器 Favicon

常見問題

站內相關連結

• 返回 Favicon 生成器首頁
• SVG Favicon 生成器
• Favicon 尺寸指南