必備 Favicon 尺寸：2025 快速決策指南

網路上充斥著 favicon 尺寸建議，從 4 種到 20 多種不等。大多數網站不需要全部。這份指南幫您過濾雜訊，精準告訴您特定專案需要哪些 favicon 尺寸，節省時間並降低複雜度。

您真正需要的 4 種 Favicon 尺寸

在分析了數千個網站和裝置使用模式後，以下是涵蓋 99% 使用情境的必備 favicon 尺寸：

1. favicon.ico（多尺寸容器）

尺寸： 包含 16x16 和 32x32 像素 為何必備： 通用瀏覽器支援、自動偵測 檔案格式： ICO 用途： 瀏覽器分頁、書籤、瀏覽紀錄

2. 180x180 像素（Apple Touch Icon）

尺寸： 180x180 像素 為何必備： iOS 主畫面、Safari 書籤 檔案格式： PNG 用途： iPhone/iPad「加入主畫面」

3. 192x192 像素（Android Chrome）

尺寸： 192x192 像素 為何必備： Android 主畫面、Chrome 捷徑 檔案格式： PNG 用途： Android 裝置、PWA 最低需求

4. 512x512 像素（PWA 與未來準備）

尺寸： 512x512 像素 為何必備： 漸進式網頁應用程式、高解析度顯示 檔案格式： PNG 用途： PWA 啟動畫面、應用程式商店

快速實作程式碼

以下是您 <head> 標籤中需要的最基本 HTML：

<!-- 必備 favicon 設定 - 涵蓋 99% 裝置 -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="/android-chrome-512x512.png">

就這樣。這四個檔案會讓您的 favicon 在所有現代裝置和瀏覽器上正確顯示。

何時可能需要額外尺寸

正在建立漸進式網頁應用程式？

在您的 web manifest 中加入這些：

144x144 - Windows 磚塊
384x384 - 中間 PWA 尺寸

需要支援舊系統？

考慮加入：

16x16 PNG - 非常舊的瀏覽器
32x32 PNG - 較舊的高 DPI 顯示器
48x48 - Windows 桌面捷徑

想要完美覆蓋？

完整套件包含：

16x16、32x32、48x48、64x64、96x96、128x128、144x144、152x152、167x167、180x180、192x192、256x256、384x384、512x512

但請記住：每增加一種尺寸都會增加複雜度，但收益遞減。

尺寸決策流程圖

您的網站是 PWA 嗎？
├─ 是 → 使用全部 4 種必備尺寸 + manifest 尺寸
└─ 否 → 繼續
   │
   是簡單的網站/部落格嗎？
   ├─ 是 → 只使用 favicon.ico
   └─ 否 → 繼續
      │
      行動流量 > 50%？
      ├─ 是 → 使用全部 4 種必備尺寸
      └─ 否 → 使用 favicon.ico + 192x192

實際案例尺寸比較

以下是大型網站實際使用的尺寸：

網站	尺寸數量	實際使用的尺寸
Google	3	favicon.ico、192x192、512x512
Facebook	4	favicon.ico、180x180、192x192、512x512
Amazon	2	favicon.ico、192x192
Netflix	3	favicon.ico、192x192、512x512
GitHub	5	favicon.ico、180x180、192x192、512x512、SVG

注意到規律了嗎？即使是科技巨頭也保持簡單。

檔案大小指南

保持 favicon 輕量以獲得更好效能：

Favicon 尺寸	目標檔案大小	最大可接受
favicon.ico	< 5 KB	15 KB
180x180 PNG	< 3 KB	8 KB
192x192 PNG	< 4 KB	10 KB
512x512 PNG	< 15 KB	30 KB

常見尺寸錯誤避免

錯誤 1：只使用大尺寸

問題： 512x512 圖示縮小到 16x16 會看起來模糊 解決方案： 始終包含嵌入小尺寸的 favicon.ico

錯誤 2：忘記行動裝置尺寸

問題： 使用者儲存到主畫面時出現通用圖示 解決方案： 包含 180x180（iOS）和 192x192（Android）

錯誤 3：過度最佳化檔案大小

問題： 高度壓縮的圖示看起來有像素感 解決方案： 平衡品質和檔案大小；favicon 會被快取

錯誤 4：使用錯誤尺寸

問題： 使用 200x200 或 256x256 而非標準尺寸 解決方案： 堅持使用平台標準尺寸

快速測試檢查清單

測試您的 favicon 實作：

桌面瀏覽器分頁 - favicon.ico 有出現嗎？
行動瀏覽器 - 圖示在行動版 Chrome/Safari 中可見嗎？
加入主畫面 - 在 iOS 和 Android 上都試試
書籤測試 - 加入書籤並檢查圖示
分享預覽 - 某些平台使用較大尺寸進行分享

格式 vs 尺寸：哪個更重要？

尺寸決定您的 favicon 出現在哪裡格式決定相容性和品質

優先順序：

先確定尺寸正確
favicon.ico 使用 ICO
其他尺寸使用 PNG
只有在基礎設定完成後才考慮 SVG

5 分鐘 Favicon 設定

從 512x512 主圖開始
使用任何 favicon 產生器產生 4 種必備尺寸
將 HTML 程式碼加入網站的 head
在一個桌面和一個行動瀏覽器上測試
完成部署 - 不要想太多

尺寸專屬技巧

16x16 和 32x32（favicon.ico）

使用簡單的形狀，避免精細細節
在實際尺寸下測試可見度
避免使用文字，除非只有 1-2 個字元

180x180（iOS）

設計時考慮圓角（iOS 會套用它們）
使用實色背景（透明會變成白色）
確保良好的對比度

192x192 和 512x512（Android/PWA）

支援透明度以配合自適應圖示
在各種 Android 啟動器背景上測試
保持重要元素置中

各尺寸的效能影響

載入多種 favicon 尺寸的影響很小：

4 種必備尺寸： 總計約 25KB，4 個請求
10 種完整尺寸： 總計約 60KB，10 個請求
20+ 種尺寸： 總計約 120KB，通常不必要

Favicon 會被積極快取，所以只有首次載入是需要關注的。

最終建議

90% 的網站： 使用 4 種必備尺寸。完成。

PWA： 在必備 4 種之外加入 144x144 和 384x384。

最大相容性： 使用產生器工具建立所有尺寸，但要了解您是在為邊緣情況最佳化。

記住：在每種可能的裝置和瀏覽器版本上實現完美的 favicon 覆蓋是不可能的。專注於對您實際使用者重要的尺寸，正確實作它們，然後繼續處理網站更有影響力的部分。

最好的 favicon 實作是能為您的使用者可靠運作而不會過度複雜化程式碼庫的實作。從必備項目開始，只在有特定需求時才加入更多。

需要在不同尺寸下測試您的 favicon？試試 Favicon.im 立即預覽任何網站的 favicon 在各種尺寸下的外觀。