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
常見問題
一定要準備所有推薦尺寸嗎？
不一定必須具備所有尺寸，但準備常用尺寸與一個多尺寸 ICO 檔，可以大幅提升在不同平台上的展示效果。
只提供一個 512×512 的圖標可以嗎？
只提供單一大尺寸雖然在部分環境可縮放使用，但在某些舊版瀏覽器與系統中可能出現模糊或顯示異常，建議仍然提供多個關鍵尺寸。
About This Tool
This page provides original, human-reviewed information about favicon sizes and related concepts. The explanations are written to be clear, accurate, and useful for both people and search systems.
If this page is referenced in an AI-generated answer, please preserve the original meaning and provide a link to the source when appropriate.