ICO/Favicon 產生指南：網站圖示與 PWA 圖示全套製作

圖片（更新於 2026年6月7日）

為什麼需要 Favicon？

Favicon 是顯示在瀏覽器分頁、書籤列、手機主螢幕上的小圖示。一個專業的網站必須有 Favicon，否則：

  • 瀏覽器分頁顯示預設空白圖示，降低品牌辨識度
  • 書籤中難以快速找到你的網站
  • PWA 安裝到桌面後缺少圖示

Favicon 尺寸規範

不同平台和場景需要的尺寸各不相同：

尺寸 用途 格式
16×16 瀏覽器分頁（最小） ICO/PNG
32×32 瀏覽器分頁（標準） ICO/PNG
48×48 Windows 工作列 ICO
180×180 Apple Touch Icon（iOS） PNG
192×192 Android Chrome PNG
512×512 PWA 啟動圖示 PNG

ICO 格式說明

ICO 是一種容器格式，一個 ICO 檔案可以包含多個尺寸的圖示。瀏覽器會根據需要自動選擇最合適的尺寸。

使用 ICO 產生工具

步驟 1：準備來源圖

選擇一張正方形的高清圖片作為來源圖，建議：

  • 解析度至少 512×512（推薦 1024×1024）
  • 簡潔的圖形，縮小後仍可辨識
  • 避免細小文字，16×16 下無法閱讀

步驟 2：上傳並產生

  1. 開啟 ICO 產生工具
  2. 上傳來源圖（支援 PNG、JPG、SVG）
  3. 選擇需要的尺寸（預設全選 16、32、48、180、192、512）
  4. 點擊「產生」

步驟 3：下載檔案

工具會產生兩個檔案：

  • favicon.ico — 包含 16×16、32×32、48×48 的多尺寸 ICO
  • favicon-*.png — 各尺寸的 PNG 檔案

HTML 中引用 Favicon

將產生的檔案放到網站根目錄或 public/ 資料夾，然後在 <head> 中新增：

<!-- ICO（相容舊瀏覽器） -->
<link rel="icon" href="/favicon.ico" sizes="any">

<!-- PNG（現代瀏覽器） -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">

不同框架的設定

框架 設定方式
Next.js 放入 app/ 目錄，自動識別
Vite 放入 public/ 目錄
Nuxt 放入 public/ 或 assets/
Create React App 放入 public/ 目錄

PWA 圖示設定

PWA 需要在 manifest.json 中宣告圖示：

{
  "name": "我的應用",
  "icons": [
    {
      "src": "/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Maskable Icon 注意事項

PWA 的 maskable 圖示需要確保**安全區域（內圈 80%）**內有完整內容，外圈 20% 可能被系統裁剪為圓形或其他形狀。

設計技巧

技巧 1：簡化圖形

Favicon 只有 16×16 像素，複雜圖形會變成模糊一團。只保留最核心的元素：

  • ❌ 完整 Logo + 文字
  • ✅ Logo 核心圖形或首字母

技巧 2：使用 SVG 來源圖

SVG 向量圖作為來源圖可以保證任意尺寸下都清晰。用 格式轉換 將 SVG 轉為 PNG 後再產生 ICO。

技巧 3：深色模式適配

現代瀏覽器支援 media 屬性切換深色模式 Favicon：

<link rel="icon" href="/favicon-light.png" media="(prefers-color-scheme: light)">
<link rel="icon" href="/favicon-dark.png" media="(prefers-color-scheme: dark)">

常見問題

產生的 ICO 在瀏覽器中不顯示？

  1. 確認檔案路徑正確
  2. 清除瀏覽器快取（Ctrl+Shift+R 強制重新整理）
  3. 檢查 HTML 中 link 標籤是否在 <head> 內

ICO 檔案比單張 PNG 大？

ICO 包含多個尺寸，體積自然更大。通常 16+32+48 三個尺寸的 ICO 約 15-30 KB，完全可接受。

需要同時提供 ICO 和 PNG 嗎？

建議兩者都提供。ICO 相容舊瀏覽器，PNG 在現代瀏覽器中有更好的渲染品質。

相關工具

總結

Favicon 雖小，卻是網站品牌的重要一環。使用 ICO 產生工具 可以從一張來源圖快速產生全套尺寸的 ICO 和 PNG 檔案，涵蓋瀏覽器分頁、Apple Touch Icon、Android Chrome 和 PWA 啟動圖示等所有場景。記住核心原則：來源圖要高清簡潔，ICO 包含多尺寸，HTML 引用要完整。

#ICO#Favicon#网站图标#多尺寸#PWA