2026 年你需要哪些 favicon 尺寸?理想的檔案組合

2026 年理想的 favicon 組合如下:一個包含 16、32 和 48 px 圖片的 favicon.ico、一個 96x96 PNG(供 Google 搜尋使用)、一個選用的 SVG favicon、一個 180x180 的 apple-touch-icon.png,以及在 Web App Manifest 中宣告的 192x192 和 512x512 PNG(外加一個可遮罩的 512 圖示)。只有在必須支援非常老舊的裝置時,才需要 Windows 磁貼與舊版 Apple 尺寸。以下將透過尺寸對照表、可直接使用的 HTML 以及常見錯誤,說明其中的原因。

過去的 favicon 環境相當混亂:每個瀏覽器和作業系統都要求自己的尺寸,因而出現了惡名昭彰、長達 20 行的 <head> 區塊。如今其中大部分都已過時。現代瀏覽器只要有一張品質良好的圖示就能自行縮放,iOS 只需要一種尺寸,而 Android 則讀取 manifest。本文將區分哪些是真正必要的,哪些只是錦上添花。

簡短回答:理想的 favicon 檔案組合

• 網站根目錄中的 favicon.ico(單一檔案包含 16、32、48 px)。瀏覽器、摘要閱讀器和許多工具仍會自動請求 /favicon.ico。
• favicon.svg(選用,但建議使用),可在任何尺寸下清晰呈現,並支援深色模式。
• PNG 16x16、32x32 和 96x96,作為明確的備用圖示。96 px 版本有助於 Google 搜尋,因為 Google 要求尺寸為 48 px 的倍數。
• 180x180 的 apple-touch-icon.png,不透明,無透明度。
• manifest.json 中的 192x192 和 512x512 PNG,以及供 Android 使用的 可遮罩 512x512 圖示。
• 用於行動裝置瀏覽器介面著色的 theme-color meta 標籤。
• Windows 磁貼(70、150、310 px)搭配 browserconfig.xml,僅適用於舊版 Windows 與 IE11 釘選的網站。

Favicon 尺寸表:用途、檔名與優先順序

請將此表當作檢查清單。「必要」代表一般網站少了它會看起來壞掉或未完成;「建議」代表能明顯提升品質;「選用」代表特殊或舊版用途。

favicon.ico:一個檔案包含 16、32 和 48 px

ICO 檔案是一種可容納多張點陣圖的容器。一個良好的 favicon.ico 會包含 16x16、32x32 和 48x48 的圖片,讓瀏覽器或作業系統能選擇最接近的尺寸。請將它放在網域的根目錄(https://example.com/favicon.ico)。即使你的 HTML 指向其他位置,許多爬蟲、RSS 閱讀器和較舊的瀏覽器仍會請求這個確切的網址,因此備有此檔案可避免日誌中出現 404 雜訊。

請不要直接把 PNG 重新命名為 .ico。大多數瀏覽器能容忍,但有些工具會拒絕,而且你也會失去多解析度的好處。請匯出真正的 ICO。

PNG favicon:16、32 和 96 px

帶有明確 sizes 的 PNG 連結,可讓瀏覽器無需解析 ICO 就能挑選最合適的點陣圖。實務上,32x32 可涵蓋高 DPI 分頁,而 16x16 在今天幾乎是多餘的。96x96 尺寸值得加入,因為 Google 搜尋會在結果旁顯示 favicon,並要求圖示為正方形,且尺寸為 48 px 的倍數(48x48、96x96、144x144 等)。當 Google 為行動版搜尋結果縮小圖片時,96 px 的檔案會比 48 px 的檔案提供更清晰的來源。

設計小秘訣:在 16 px 時,細節會消失。請使用醒目而簡單的形狀、高對比,並盡量少用或不用文字。匯出前,你可以在 MakeFav 編輯器中調整並預覽你的圖示。

SVG favicon 與深色模式

SVG favicon 是單一的小檔案,在任何螢幕密度下都能保持清晰。基於 Chromium 的瀏覽器和 Firefox 都支援它。Safari 的支援在過去一直有限,因此絕不要只依賴 SVG:請保留 ICO 和 PNG 備用圖示。

最大的優勢在於主題配色。由於 SVG 可以包含 CSS,你可以利用 prefers-color-scheme 讓圖示配合使用者的色彩模式:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .bg { fill: #0f172a; }
    .fg { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      .bg { fill: #ffffff; }
      .fg { fill: #0f172a; }
    }
  </style>
  <rect class="bg" width="32" height="32" rx="6"/>
  <circle class="fg" cx="16" cy="16" r="8"/>
</svg>

請注意,此媒體查詢反映的是瀏覽器或作業系統的主題,也就是分頁列所使用的主題。它不會跟隨你自己網站上的主題切換。

一個已知的怪癖:當 ICO 和 SVG 同時列出時,Chrome 可能會選擇 ICO。將 ICO 宣告為 sizes="32x32",並把 SVG 列在其後,可讓 Chrome 優先採用 SVG,如下方程式碼所示。

Apple touch icon:180x180 與舊版尺寸

當使用者將你的網站加入 iOS 或 iPadOS 主畫面時,Safari 會使用 apple-touch-icon。現今只要一個 180x180 px 的 PNG 就已足夠:iOS 會為較舊的裝置和 iPad 縮小該圖片。請將它命名為 apple-touch-icon.png 並放在根目錄;即使沒有 link 標籤,iOS 也會預設尋找該檔案。

Apple 圖示的規則:

• 不要有透明度。iOS 會將透明像素填成黑色,因此透明的標誌常會變成一團黑。請加上純色背景。
• 不要有圓角。iOS 會套用自己的圓角遮罩。請提供完整的正方形。
• 請讓重要內容遠離最邊緣,因為四個角會被裁切。

什麼時候需要舊版尺寸(57、72、76、114、120、144、152、167)?只有在你需要支援 iOS 6 或更早版本,或想針對 iPad Pro(167 px)和 iPad(152 px)精確控制每個裝置的像素時才需要。對於 2026 年幾乎所有網站而言,只要 180x180 這一個檔案就夠了。下方的最大相容性設定為求完整,包含了其中幾個。

Android 與 PWA 圖示:192、512 與可遮罩

Android 上的 Chrome 與其他支援 PWA 的瀏覽器,是從 Web App Manifest 讀取圖示,而不是從 <link rel="icon">。若要符合可安裝的條件,至少需要一個 192x192 和一個 512x512 的 PNG。192 px 圖示用於主畫面和應用程式啟動器;512 px 圖示則出現在啟動畫面和安裝對話框中。

可遮罩圖示與安全區域

Android 的自適應圖示可能會依裝置被裁切成圓形、圓角方形或其他形狀。可遮罩(maskable)圖示的設計目的,就是能被安全地裁切:重要內容必須位於安全區域內,也就是置中的圓形,直徑為圖片的 80%(半徑等於邊長的 40%)。以 512x512 的檔案來說,這表示要把標誌保持在直徑約 410 px 的圓內,並將背景色延伸到四個邊緣,讓遮罩後不會出現空隙。

請以 "purpose": "maskable" 將可遮罩圖示宣告為獨立的項目。避免在同一個檔案上使用 "any maskable":遮罩所需的留白,在圖示未被遮罩時顯示會顯得太小。

manifest.json 範例

{
  "name": "Example App",
  "short_name": "Example",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0f172a",
  "icons": [
    {
      "src": "/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    },
    {
      "src": "/maskable-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

請以 application/manifest+json(或 application/json)提供該檔案,並在每個頁面中以 <link rel="manifest" href="/manifest.json"> 連結它。有些專案會將它命名為 site.webmanifest;檔名並不重要,重要的是連結。

Windows 磁貼與 browserconfig.xml

Windows 8.1 和 10 允許使用者將網站釘選到開始功能表,而 IE11 與舊版 Edge 會從 browserconfig.xml 讀取磁貼圖片。常見的尺寸為 70x70(小)、150x150(中)、310x150(寬)和 310x310(大)。基於 Chromium 的 Edge 則改用 manifest 和一般的 favicon,因此這是舊版功能。只有在你的目標受眾仍包含較舊的 Windows 環境(例如企業環境)時才需要加入。

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <TileColor>#0f172a</TileColor>
    </tile>
  </msapplication>
</browserconfig>

theme-color:為瀏覽器介面著色

theme-color meta 標籤會告訴行動瀏覽器(以及部分桌面瀏覽器)網址列或標題列要使用哪種顏色。它不是 favicon,但與 favicon 同屬品牌識別的一環。你可以分別為淺色與深色模式提供不同的值:

<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

極簡現代設定 vs. 最大相容性

極簡現代設定(適合大多數網站)

五個檔案就能涵蓋超過 99% 的實際使用情境:favicon.ico、favicon.svg、apple-touch-icon.png(180x180),以及兩個 manifest 圖示(192 和 512)。如果 Google 搜尋的能見度對你很重要,請再加上 96x96 的 PNG;如果你要發布 PWA,則再加上可遮罩圖示。

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.json">

最大相容性設定

當你的受眾廣泛或屬於企業用戶,或是希望涵蓋所有可能的用戶端時,請選擇此設定。它加入了明確的 PNG 尺寸、舊版 Apple 尺寸、Windows 磁貼和主題色。

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Classic and modern browser icons -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">

  <!-- Apple -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">

  <!-- Android / PWA -->
  <link rel="manifest" href="/manifest.json">
  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#0f172a" media="(prefers-color-scheme: dark)">

  <!-- Windows (legacy) -->
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta name="msapplication-TileColor" content="#0f172a">

  <title>Example</title>
</head>

請注意以 / 開頭的根相對路徑。它們在任何頁面層級都能運作,而這也帶出了最常見的錯誤。

常見的 favicon 錯誤與修正方法

1. 路徑錯誤

像 href="favicon.ico" 這樣的連結會相對於目前的網址解析,因此在 / 可以運作,但在 /blog/post/ 就會失效。請使用根相對路徑(/favicon.ico)或絕對網址。同時請確認檔案確實存在:直接在瀏覽器中開啟每個網址,並確定它回傳 HTTP 200,而不是被重新導向到 404 頁面或登入頁面。

2. 缺少或錯誤的 sizes 屬性

沒有 sizes 的話,瀏覽器必須下載圖示才能檢視,而且可能選錯圖示。請務必在 PNG 連結上宣告 sizes,並確保它與實際像素尺寸相符。標示為 32x32 但實際上是 64x64 的檔案,會導致結果不一致。

3. 過度積極的快取

瀏覽器會將 favicon 快取很長一段時間,而且通常獨立於頁面快取之外。品牌改版後,舊圖示可能會殘留好幾天。請更改檔名或加上版本查詢字串(/favicon.ico?v=2),並更新 link 標籤。強制重新整理通常無法更新分頁圖示;直接開啟圖示網址並重新整理,通常才有效。

4. 非正方形的圖片

Favicon 必須是正方形。長方形的標誌會被無法預期地拉伸、裁切或加上黑邊。請設計專用的正方形標誌,例如首字母或符號,而不是縮小寬幅的文字標誌。

5. 透明的 Apple touch icon 變成黑色

iOS 會將透明處填成黑色。請為 180x180 的圖示加上不透明背景,且不要事先處理成圓角。

6. 沒有安全區域的可遮罩圖示

如果標誌碰到可遮罩圖示的邊緣,Android 會把它切掉。請將標誌保持在中央 80% 的圓形內,並以背景色填滿整個畫布。

7. 阻擋爬蟲存取圖示

如果 robots.txt 禁止存取你的 favicon 路徑,Google 就無法擷取它,並會在搜尋結果中顯示通用的地球圖示。另請記住,Google 需要 favicon 與頁面位於同一主機,而且只會偶爾更新,因此變更可能需要數天或數週才會顯示。

8. 忘了 manifest 連結或 purpose

未連結的 manifest,或缺少 192 和 512 px 圖示的 manifest,會導致 Chrome 無法顯示安裝提示。請在瀏覽器開發人員工具的「Application」分頁中驗證它。

一鍵產生整套檔案

在影像編輯器中手動建立十幾個檔案,再轉換成 ICO 並撰寫 manifest,既繁瑣又容易出錯。MakeFav 可從單一圖片、文字或表情符號產生上述所有檔案:多尺寸 favicon.ico、PNG、SVG、Apple touch icon、192/512 PNG、可遮罩圖示、Windows 磁貼、manifest.json 和 browserconfig.xml,另外還有可直接貼上的 HTML 程式碼片段,全部包含在一個 ZIP 檔案中供你下載。你可以在編輯器中微調背景、留白與形狀,用 favicon 檢查工具驗證現有網站,並透過開發人員資源將產生流程自動化。

部署檢查清單

1. 將所有檔案上傳到網站根目錄。
2. 將 HTML 程式碼片段貼到每個頁面(或你的共用版面配置)的 <head> 中。
3. 確認路徑為根相對路徑,且回傳 HTTP 200。
4. 檢查淺色與深色模式、iOS 主畫面安裝以及 Android 安裝。
5. 執行檢查工具,找出缺少或不相符的尺寸。
6. 如果你替換了舊圖示,請以版本字串破除快取。

常見問題

2026 年還需要 favicon.ico 嗎?

需要。雖然現代瀏覽器接受 PNG 和 SVG,但許多爬蟲、摘要閱讀器、電子郵件用戶端和較舊的瀏覽器仍會直接請求 /favicon.ico。包含 16、32 和 48 px 圖片的多尺寸 ICO 檔案很小,卻能避免圖示遺失和 404 錯誤。

Google 搜尋的 favicon 應該多大?

Google 要求 favicon 為正方形,且尺寸為 48 px 的倍數,至少 48x48。96x96 的 PNG 是安全的選擇,同時也支援 SVG。Google 還需要該檔案可被爬取,因此請勿在 robots.txt 中封鎖它。更新可能需要數天或數週才會顯示。

Apple touch icon 用 180x180 夠嗎?

對幾乎所有網站而言,夠了。iOS 與 iPadOS 會為目前所有裝置縮小 180x180 的 PNG。較舊的尺寸(57 至 152 px)只對非常老舊的 iOS 版本才有意義。請記得使用不透明的背景,避免圖示變成黑色。

什麼是可遮罩圖示?我需要嗎?

可遮罩圖示是專為 Android 自適應圖示形狀設計的 512x512 PNG。它的重要內容位於中央直徑 80% 的圓內,背景則填滿整個正方形。只有在提供可安裝的 PWA 時才需要它,但它能讓圖示看起來像原生應用程式,而不是被放在一個白色圓圈裡。

為什麼我更改了 favicon 之後,舊的還是會顯示?

瀏覽器會單獨且長時間地快取 favicon。請重新命名檔案或加上版本查詢字串(例如 ?v=2),更新 link 標籤,然後直接開啟圖示網址並重新整理。搜尋引擎可能需要更長的時間才會更新它們自己的副本。