SVG Favicon：為什麼更好以及如何實際使用

事情是這樣的：自從 1999 年以來，我們一直被困在像素化的 ICO 檔案中。二十五年的模糊小圖示。但 SVG favicon？它們真的蠻厲害的——而且大多數開發者仍然沒有在使用。

讓我告訴你為什麼你可能想要切換，更重要的是，如何在不影響舊版瀏覽器使用者的情況下實作。

為什麼 SVG Favicon 真的值得

無限縮放不模糊

還記得為你的 favicon 建立五種不同的 PNG 尺寸嗎？16x16、32x32、48x48... 很快就膩了。用 SVG，你只需建立一個檔案。就這樣。無論是在瀏覽器分頁中顯示 16 像素還是在 PWA 啟動畫面中顯示 512 像素，它都看起來清晰銳利。

一個典型的 SVG favicon 大約 300-800 bytes。相比之下，一個 PNG favicon 套件大約 2-5 KB。這是 85-95% 的大小減少。絕對數字上不算大，但當你在做最佳化時，每個 byte 都很重要。

深色模式就是這麼簡單

這是殺手級功能。使用 SVG favicon，你可以直接在檔案中嵌入 CSS 媒體查詢。當使用者切換到深色模式時，你的 favicon 會自動適應。

實際看起來像這樣：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    path { fill: #1a1a1a; }
    @media (prefers-color-scheme: dark) {
      path { fill: #ffffff; }
    }
  </style>
  <path d="M16 4L4 28h24L16 4z"/>
</svg>

這是一個簡單的三角形，在淺色背景上是深色，在深色背景上是淺色。不需要 JavaScript。不需要伺服器端偵測。它就是能用。

CSS 樣式和動畫

由於 SVG 基本上是帶有樣式的 XML，你可以做點陣格式無法做到的事情：

懸停時改變顏色（在支援的情境中）
加入微妙的動畫
使用 CSS 變數進行主題化
用 JavaScript 修改樣式

我不建議在 favicon 中瘋狂使用動畫——那有點煩人。但有這個選項是不錯的。

瀏覽器支援現況

讓我們坦白說：SVG favicon 的支援並不完美。以下是 2025 年的現況：

完整支援：

Chrome 80+（桌面和 Android）
Firefox 41+
Edge 80+
Opera 44+
Samsung Internet 13+

不支援：

Safari（桌面和 iOS 都不支援）
Internet Explorer
Android Browser

Safari 是大問題。Apple 的瀏覽器仍然不支援 SVG favicon，這意味著大約 20% 的使用者看不到你的 SVG 圖示。你需要備用方案。

正確實作 SVG Favicon

帶備用方案的基本設定

這是涵蓋所有人的標記：

<head>
  <!-- 非常舊的瀏覽器的 ICO 備用 -->
  <link rel="icon" href="/favicon.ico" sizes="32x32">

  <!-- 現代瀏覽器的 SVG -->
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">

  <!-- Safari 的 PNG 備用 -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">

  <!-- Apple Touch Icon（Safari 不會使用你的 SVG） -->
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

順序很重要。瀏覽器按順序解析這些，使用它們支援的最後一個。現代瀏覽器會抓 SVG，Safari 會用 PNG，古老的瀏覽器會退回使用 ICO。

專業技巧：防止 Chrome 使用 ICO

Chrome 有時即使有 SVG 也會下載 ICO。在你的 ICO link 加上 sizes="32x32"——這告訴 Chrome 這個 ICO 只用於特定尺寸，所以它會偏好可縮放的 SVG。

建立深色模式自適應 SVG

這是一個更完整的範例：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .icon-bg { fill: #ffffff; }
    .icon-fg { fill: #000000; }

    @media (prefers-color-scheme: dark) {
      .icon-bg { fill: #1a1a1a; }
      .icon-fg { fill: #f0f0f0; }
    }
  </style>

  <circle class="icon-bg" cx="16" cy="16" r="15"/>
  <text class="icon-fg" x="16" y="21"
        text-anchor="middle"
        font-family="system-ui"
        font-weight="bold"
        font-size="18">F</text>
</svg>

這會建立一個圓形圖示，帶有一個根據系統偏好反轉顏色的字母。

檔案大小現實檢查

人們有時聲稱 SVG 總是更小。這不完全正確。實際情況是：

簡單幾何圖示：SVG 勝出，通常差距很大
複雜插圖：PNG 實際上可能更小
照片或詳細圖形：不要用這些當 favicon

對於典型的 logo 風格 favicon（形狀、字母、簡單圖形），SVG 在檔案大小上幾乎總是更好的選擇。

最佳化技巧

在部署你的 SVG favicon 之前，用 SVGOMG 或類似的最佳化工具處理它。像 Illustrator 和 Figma 這樣的匯出工具會加入很多垃圾——中繼資料、編輯器註解、座標中不必要的精確度。

好的最佳化可以將你的 SVG 大小減少 50-70%。

另外，保持設計簡單。複雜的漸層、濾鏡和數百個路徑不只會增加檔案大小——還可能造成渲染延遲。

關於主題偵測的一件事

SVG 內部的 prefers-color-scheme 媒體查詢遵循作業系統偏好，而不是瀏覽器的主題設定。如果有人使用深色模式的 macOS 但瀏覽器設定為淺色主題，favicon 仍然會是深色模式風格。

這與大多數網站處理深色模式的方式一致，但值得知道。

你應該切換到 SVG 嗎？

如果你目前的 favicon 是簡單的形狀或字母標誌，SVG 可能值得。你會獲得：

一個檔案代替多個
自動深色模式支援
更小的總檔案大小
面向未來的可縮放性

如果你的 favicon 是詳細的插圖或你有很多 Safari 使用者，堅持用 PNG 作為主要格式。

大多數網站的最佳方法？兩者都用。支援的瀏覽器用 SVG，不支援的用 PNG 備用。設定只需多花 5 分鐘，涵蓋 100% 的使用者。

快速實作清單

[ ] 建立你的 SVG favicon（保持簡單）
[ ] 如需要加入深色模式媒體查詢
[ ] 用 SVGOMG 最佳化
[ ] 建立 PNG 備用（最少 32x32）
[ ] 建立 apple-touch-icon.png（180x180）
[ ] 加入帶備用順序的適當 link 標籤
[ ] 在 Chrome、Firefox 和 Safari 中測試

就這樣了。SVG favicon 並不複雜——只是沒被充分使用。在你的下一個專案中試試看。

參考資料

Can I Use - SVG Favicons - SVG favicon 支援的瀏覽器相容性資料
Building an Adaptive Favicon - web.dev - Google 的自適應 favicon 建立指南
SVG Favicons and All the Fun Things We Can Do With Them - CSS-Tricks - SVG favicon 功能的全面探索
How to Favicon in 2025 - Evil Martians - 實用的現代 favicon 實作指南