Favicon 應該用多大尺寸？
選擇正確的 Favicon 尺寸，是確保在不同瀏覽器、裝置與平台上正確顯示圖標的關鍵。
本指南會介紹在不同情境下建議使用的 Favicon 尺寸，以及如何搭配多種格式以獲得最佳相容性。
快速答案
簡短結論：
建議的 Favicon 尺寸包含 16×16, 32×32, ，其中 48×48 用於桌面捷徑，180×180 用於 Apple 裝置主畫面圖標，192×192 與 512×512 則用於 Android 與 PWA 應用圖標。
瀏覽器 Favicon 尺寸
在桌機與行動瀏覽器中，為了確保相容性，通常需要提供多種尺寸的 PNG 圖標以及一個多尺寸 ICO 檔案。
| 尺寸 | 檔名 | 用途 |
|---|---|---|
| 16×16 | favicon-16x16.png | 瀏覽器分頁 |
| 32×32 | favicon-32x32.png | 工作列與瀏覽器介面 |
| 48×48 | favicon-48x48.png | 桌面捷徑 |
| 多尺寸 | favicon.ico | 傳統瀏覽器 / 舊版環境相容 |
Apple Touch 圖標尺寸
Apple 裝置在將網站加入主畫面時，會使用較大的圖標尺寸。
| 尺寸 | 檔名 | 裝置 |
|---|---|---|
| 152×152 | apple-touch-icon-152x152.png | iPad |
| 167×167 | apple-touch-icon-167x167.png | iPad Pro |
| 180×180 | apple-touch-icon.png | iPhone |
Android 與 PWA 圖標尺寸
Android Chrome 與 PWA 安裝流程對圖標尺寸有明確要求。
| 尺寸 | 檔名 | 用途 |
|---|---|---|
| 192×192 | android-chrome-192x192.png | 主畫面圖標 |
| 512×512 | android-chrome-512x512.png | 應用啟動器與啟動畫面 |
這些尺寸是通過 PWA 安裝檢查所必需的。
SVG Favicon 尺寸
SVG favicon 屬於向量圖，不需要固定尺寸。
建議做法：
- 使用正方形 viewBox（例如 0 0 100 100）
- 讓圖形保持置中
- 避免過於複雜的細節
SVG favicon 在高解析度與縮放場景中可以完美縮放。
應該使用哪些 Favicon 格式？
| 格式 | 適用情境 |
|---|---|
| PNG | 最常見，支援度高 |
| ICO | 相容舊版瀏覽器與特殊情境 |
| SVG | 現代瀏覽器、支援縮放與深色模式 |
Best practice: Use PNG + ICO + SVG together.
Recommended HTML Markup
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="manifest" href="/site.webmanifest">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/android-chrome-512x512.png" sizes="512x512">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">Common Favicon Mistakes
- Using only one favicon size
- Forgetting Apple Touch Icons
- Missing PWA icons
- Using low-resolution source images
Generate All Favicon Sizes Automatically
Instead of manually resizing icons, you can generate all required favicon sizes instantly using favicon.pub. Upload a single image and download a complete package containing ICO, PNG, SVG, Apple Touch Icons, Android icons, and a PWA manifest.
Internal Links
上傳圖片，立即生成完整 Favicon 圖標與配置