直接回答：favicon 沒有唯一的尺寸。瀏覽器分頁要 16×16，它的高解析度兄弟要 32×32，Windows 捷徑要 48×48，iOS 主畫面要 180×180，Android 要 192×192 和 512×512。涵蓋前三者的經典做法是一個 ICO 檔案；其餘的是幾個 PNG 加幾行宣告。本文就是完整的地圖：每個尺寸、用在哪、以及遞送它的準確程式碼。
尺寸對照表
| 尺寸 | 使用場景 | 格式 |
|---|---|---|
| 16×16 | 瀏覽器分頁、網址列、瀏覽紀錄 | ICO |
| 32×32 | 高 DPI 分頁、Retina 螢幕 | ICO |
| 48×48 | Windows 桌面捷徑、安裝圖示 | ICO |
| 180×180 | iOS 主畫面（apple-touch-icon） | PNG |
| 192×192 | Android 主畫面、Chrome 應用程式列表 | PNG |
| 512×512 | Android 啟動畫面、PWA 安裝 | PNG |
六個尺寸涵蓋所有主流場景。下文解釋每一列為何存在，以及邊角情況在哪裡。
ICO：一個檔案裝三個尺寸
ICO 容器是 favicon 的原始格式，它唯一的超能力是在單個檔案裡裝多個解析度。一個構建良好的 favicon.ico 裝著 16、32 和 48；瀏覽器或作業系統讀檔案開頭的目錄，挑出合適的條目。這個目錄的位元組級佈局見我們的 ICO 格式深度解析。
之所以要手工製作小尺寸而不是讓渲染器直接縮小你的標誌：16×16 一共只有 256 個像素。自動縮小會把精細圖形糊成一團；為這個尺寸專門繪製或至少修過的版本才能保持可辨認。把原圖拖進 PNG 轉 ICO，標準尺寸會自動打包好。
兩個事實讓 ICO 在 2026 年依然繞不開。有史以來每個瀏覽器都讀它。而且瀏覽器會對任何沒有宣告的頁面自動請求 /favicon.ico——RSS 閱讀器、連結預覽和爬蟲也會往那裡找。根目錄放一個 favicon.ico，是白送的涵蓋面。
PNG favicon 與 sizes 屬性
現代瀏覽器接受按尺寸宣告的 PNG favicon：
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
sizes 屬性的意義在於讓瀏覽器在下載之前就能選——沒有它，所有宣告的檔案可能都被下載，事後才分勝負。同解析度下 PNG 比 ICO 小，產生也更簡單，但它只在瀏覽器看得懂這些宣告的地方有效。老瀏覽器完全無視它們——所以 PNG 是 ICO 的補充，不是替代。
apple-touch-icon：180×180
當有人把你的網站存到 iOS 主畫面時，Safari 會找 apple-touch-icon.png。標準尺寸是 180×180；iOS 會為更小的場景自行縮小，而且——這點常讓人意外——它會自己給圖示加圓角、還可能加背景。所以交付一張方形、不透明背景的圖；透明區域在老版本 iOS 上會被合成到黑色上。
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
即使不寫這行標籤，這個檔案也會按慣例從 /apple-touch-icon.png 被請求，和 favicon.ico 一個道理。
Android 和 Chrome：manifest 裡的 192 和 512
Android 上的 Chrome 從 web app manifest 讀圖示。重要的尺寸有兩個：主畫面圖示 192×192，啟動畫面和安裝提示 512×512。
{
"icons": [
{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}
在頁面裡引用一次 manifest：
<link rel="manifest" href="/site.webmanifest" />
SVG favicon：有前途，但還不夠
SVG favicon 一個檔案適配所有場景，Chromium 和 Firefox 多年前就支援了：
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
釘子戶是 Safari，至今仍無視 SVG favicon——它唯一的類 SVG 機制是 mask-icon：給固定分頁用的單色 SVG，帶主題色：
<link rel="mask-icon" href="/icon-mask.svg" color="#1a1a1a" />
SVG 是疊在 ICO 和 PNG 之上的優秀漸進增強。但它還不是替代品。
完整的 head 宣告
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
六個檔案，六行程式碼，全場景涵蓋。ICO 那行的 sizes="any" 告訴瀏覽器容器裡有多個解析度，讓它挑選而不是預設 16×16。
產生這些檔案
從一張 512×512 以上的方形原圖開始，然後：用 PNG 轉 ICO 或 WebP 轉 ICO 打包容器，縮出 180/192/512 的 PNG，manifest 手工接好。從原始標誌到上線圖示的完整流程見 如何製作 favicon。轉換器裡的一切都在你的瀏覽器本機運作——整個過程中唯一的上傳，是你自己把檔案推到你自己的伺服器上。