Favicon UX：優秀的 Favicon 需要具備什麼條件

優秀的 Favicon 是一個簡潔、高對比的標誌，通常是您的標誌符號或一到兩個字母，在淺色與深色的瀏覽器分頁上，都能以 16x16 像素清楚辨識，符合您的品牌形象，而且很少更動。本指南中的其他內容（像素對齊、色彩、留白、透明度、檔案大小）都是為了達成這些目標：讓您的網站在數十個開啟的分頁中一眼就能被找到。

Favicon 雖然很小，卻出現在許多地方：瀏覽器分頁、書籤列、瀏覽記錄清單、分頁搜尋選單、行動與桌面版的 Google 搜尋結果，以及手機主畫面。對於開啟許多分頁的使用者來說，標題常常被截斷到完全看不見，圖示就成了唯一的線索。這使它成為真正的導覽元素，而不只是裝飾。

1. 16x16 的辨識度

經典的 Favicon 尺寸是 16x16 CSS 像素。在標準顯示器上，那確實就是 256 個像素；在 2x 視網膜顯示器上，瀏覽器通常會為相同空間選用 32x32 的圖片。無論您設計什麼，都必須經得起這樣的縮小。

保持簡潔

• 一個形狀或一到兩個字母。單一粗體字母、帶有符號的圓形，或簡單的幾何標誌都行得通。三個字母或一個單字則會變成雜訊。
• 單一視覺焦點。如果您無法用五個字描述這個圖示，就代表它太複雜了。
• 不要使用漸層、陰影或細緻紋理。在小尺寸下，它們會變成模糊的污漬。

對齊像素網格

在 16x16 時，偏離網格半個像素的線條會在兩列像素之間產生反鋸齒，看起來灰灰糊糊的。請將邊緣放在完整的像素邊界上，並在形狀對稱時使用偶數寬度。如果您從向量工具匯出，請啟用像素貼齊，或檢查縮小後的結果並手動修正。

避免細線條

在 16x16 時，粗細小於 2 像素的筆畫（約為圖示寬度的 12%）容易消失，或在不同尺寸間閃爍。請加粗筆畫、移除內部細節，並合併細小的縫隙。一個粗體、略顯厚重的字形，通常比忠實縮小的精細標誌更容易辨讀。

手動微調

ICO 與 PNG 檔案沒有字型式的 hinting，因此手動編輯像素就是等效的做法：您逐一調整個別像素，讓曲線、斜線與字腔（像「a」或「e」這類字母中的孔洞）保持清晰。自動縮小是不錯的初稿，但幾個手動擺放的像素，往往就是一團模糊與可辨識字母之間的差別。MakeFav 像素編輯器正是為此而設計：開啟 16x16 畫布，修正有問題的像素，然後匯出。

2. 淺色與深色分頁上的對比

瀏覽器現在經常以深色模式執行，許多使用者的分頁列也與網頁主題不同。背景透明的深海軍藍圖示，在白色分頁上可能完美無瑕，在深灰色分頁上卻幾乎看不見。請務必兩者都測試。

實用解決方案

• 加入背景形狀。以品牌色製作的實心圓角方形或圓形，可確保標誌自帶對比，不受分頁影響。
• 使用細輪廓或光暈。在深色字形周圍加上 1px 較淺的邊緣（或反之），可讓輪廓在任一主題下都清晰可見，但在 16x16 時必須保持銳利，所以請測試。
• 選擇中間色調的品牌色。鮮明的藍、橙、綠或洋紅等顏色，通常在白色與近黑色的表面上都適用。非常淺的黃色或非常深的海軍藍則是風險較高的選擇。
• 使用自適應 SVG Favicon。SVG 可以包含 prefers-color-scheme 媒體查詢，讓圖示隨系統主題改變。

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'>
  <style>
    .mark { fill: #1b2a49; }
    @media (prefers-color-scheme: dark) {
      .mark { fill: #f5f7fa; }
    }
  </style>
  <path class='mark' d='M6 26V6h6l4 10 4-10h6v20h-4V13l-4 10h-4l-4-10v13z'/>
</svg>

請注意，媒體查詢反映的是作業系統或瀏覽器的主題，這通常是分頁列所遵循的，但並非總是如此。SVG Favicon 的支援度也不一：Chrome 與 Firefox 可以處理，而 Safari 過去一向落後，因此請務必保留 PNG 或 ICO 作為備援。實心背景的設計是最穩健的選擇，因為它完全不需要任何主題邏輯。

3. 辨識度與品牌一致性

請使用標誌符號（符號或字母組合圖樣），而不是附有文字標誌的完整標誌組合。16x16 圖示中的文字無法閱讀，而寬幅的橫式標誌縮進正方形後，只會在中間留下一小條。

• 如果您的品牌有符號，請針對小尺寸加以簡化，而不是單純縮小。製作細節較少的「Favicon 版本」是標準做法。
• 如果您的品牌只有文字標誌，請取第一個字母或一組有特色的字母，並以您的品牌字型、粗體字重呈現。
• 讓色彩與您的標誌、應用程式圖示和社群大頭貼保持一致，讓使用者在各處都能認出同一個品牌。

獨特性與忠實度同樣重要。看看一排分頁：如果另外三個網站也使用藍色圓形，您的就不會脫穎而出。不同的形狀或顏色，比完美忠實的縮小版更有用。

4. 色彩：有限且飽和的配色

像素這麼少，每多一種顏色都會增加雜亂。請以一到兩種顏色，最多再加上白色或黑色為目標。飽和的顏色在小尺寸下比粉彩色更突出，粉彩色往往會融入分頁背景。

可以借鑑一些無障礙設計的思維。WCAG 要求有意義的圖形物件至少要有 3:1 的對比（成功準則 1.4.11，非文字對比）。Favicon 並未被正式涵蓋，因為它屬於瀏覽器介面而非網頁內容，但字形與其背景之間、圖示與分頁之間達到 3:1，是合理的目標。此外，也要避免只靠色相來傳達任何資訊：同一圖示的紅色與綠色版本，對許多色盲使用者來說無法區分，因此請改變形狀或加入符號。

5. 形狀、留白與安全區域

填滿方形

瀏覽器分頁以固定的小尺寸顯示 Favicon，因此多餘的邊距只會讓您的標誌變小。對於標準分頁圖示，請使用大部分的畫布，只留一到兩個像素的呼吸空間，讓標誌盡可能放大。

圓角還是方形？

瀏覽器通常不會裁切分頁 Favicon，因此您畫出的形狀就是使用者看到的形狀。帶有些微圓角的方形看起來整齊，並提供一致的背景；透明背景上的自由形狀字形或圓形則可能顯得更輕盈、更有特色。兩者皆可。請選定一種，並讓整套圖示保持一致。

Apple Touch 圖示

iOS 會為 apple-touch-icon 自行加上圓角（常用尺寸為 180x180）。請提供滿版的方形圖片，不要預先做成圓角，否則角落可能會出現明顯的深色或白色細邊。

適用於 Android 與 PWA 的可遮罩圖示

可遮罩圖示會被作業系統裁切成圓形、圓角方形（squircle）或其他形狀。請將所有重要內容保留在安全區域內：以圖示為中心、半徑為圖示寬度 40% 的圓形。請將背景色延伸到邊緣，讓任何遮罩看起來都正確。不要將緊貼邊緣的分頁 Favicon 重複用作可遮罩圖示，因為遮罩會將它裁掉。

6. 透明度

透明度對分頁 Favicon 沒有問題，也讓純字形圖示能乾淨地呈現在任何分頁顏色上。但對 Apple Touch 圖示來說就是問題：iOS 會以純色（通常是黑色）填滿透明區域，可能毀掉整個設計。請務必為 apple-touch-icon 提供品牌色的不透明背景。可遮罩圖示與大多數 Android 主畫面的使用情境也是如此，不透明背景能帶來可預期的結果。

7. 穩定性：不要太常更換

Favicon 透過重複出現來建立辨識度。頻繁更換會迫使使用者重新學習哪個分頁是您的，也會造成技術上的麻煩。瀏覽器會積極快取 Favicon，而 Google 會與您的網頁分開擷取並儲存它們，因此新圖示可能需要數天或數週才會顯示在搜尋結果中。Google 也要求穩定的 Favicon 網址、尺寸為 48 像素倍數的圖示（48x48、96x96 等），以及可供爬取的檔案（未被 robots.txt 封鎖）。請將更換 Favicon 視為品牌重塑等級的決定，而不是季節性的裝飾。

8. 通知狀態與動態 Favicon

有些網頁應用程式會變更 Favicon，以表示未讀訊息、錄製狀態或錯誤。做得好時很有幫助；過度使用則令人厭煩。

• 使用小徽章（圓點或簡短的數字）放在角落，而不是完全重新設計。基本圖示應保持可辨識。
• 保持克制。只在需要使用者採取行動的事件時使用徽章。不要讓圖示持續動畫。
• 限制數字。在 16x16 時只有一到兩位數字可辨讀；請顯示「9+」或單純的圓點，而不是「137」。
• 及時重置。當使用者處理完該項目後，恢復預設圖示。
• 不要只依賴顏色。紅點也應有頁面標題支援，例如「(3) 收件匣」，讓每個人都能取得這項資訊。

動態 Favicon 通常是繪製在 canvas 上，再透過更新圖示 link 元素的 href 來替換。請對更新進行節流，因為不斷變更 Favicon 可能耗用 CPU 並分散使用者的注意力。

9. 效能

Favicon 雖小，但仍是可能被處理得很差的請求。

• 保持檔案小巧。PNG Favicon 通常只有數百位元組到幾 KB。簡單的 SVG 可以小於 1 KB。
• 避免臃腫的 ICO 檔案。包含 16、32 和 48 像素圖片的多尺寸 ICO 就足夠了。嵌入 256x256 的圖片會使檔案大小成倍增加，卻對瀏覽器分頁沒有任何可見的好處。
• 設定快取標頭。以較長的 Cache-Control 有效期提供圖示，例如 public, max-age=31536000, immutable，並在真的要更換時使用帶版本或雜湊的檔名。
• 明確宣告圖示。瀏覽器預設會請求 /favicon.ico，因此即使您宣告了其他圖示，也請提供一個，以避免記錄檔中出現 404 雜訊。
• 壓縮。以無損最佳化工具處理 PNG，並將 SVG 最小化。

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

如果您想從單一來源圖片產生所有這些檔案，MakeFav Favicon 產生器可產生標準套組，而開發人員頁面則介紹整合選項。

10. 無障礙

Favicon 沒有替代文字，螢幕閱讀器也不會朗讀它，因此像 alt 屬性這類傳統的無障礙工具並不適用。真正重要的是：

• 由頁面標題傳達意義。撰寫獨特且具描述性的 <title> 元素。切勿依賴圖示來傳達狀態；任何徽章都應在標題中同步呈現。
• 對低視力使用者的可見度。高對比、粗體形狀與較大的標誌，有助於以視覺掃描分頁的使用者。
• 不依賴顏色。確保以形狀或字母區分狀態，而不只是色相。
• 減少干擾。避免閃爍或動畫的 Favicon，這可能對動態敏感的使用者造成問題。

Favicon UX 檢查清單

測試檢查清單

不要相信設計工具中的大型預覽。請在真實情境下測試真正的圖示：

1. 多個瀏覽器。檢查 Chrome、Firefox、Safari 和 Edge，因為每個瀏覽器選擇圖示與尺寸的方式略有不同。
2. 淺色與深色模式。切換作業系統與瀏覽器主題，並每次都查看分頁列。
3. 視網膜與標準顯示器。在 1x 螢幕與 2x 或 3x 螢幕上檢查，並在瀏覽器中縮放。
4. 書籤列。將頁面加入書籤，看看圖示在其他網站旁邊是否仍然清晰易讀。
5. 大量分頁。開啟 20 個分頁，看看能否一眼找到自己的網站。
6. Google 搜尋結果預覽。在圖示重新被爬取後，檢查行動版搜尋結果。請記得更新可能需要一些時間。
7. 主畫面。將網站加入 iOS 與 Android 主畫面，確認圖示沒有被裁切、沒有黑色角落，且在遮罩內不會太小。
8. 技術檢查。將您的網域交給 MakeFav Favicon 檢查工具檢查，確認檔案存在、回傳 200 狀態、尺寸正確，且已在 HTML 中正確宣告。

實用工作流程

1. 從您的標誌符號開始，將它簡化為一個形狀或字母。
2. 建立方形畫布，搭配在兩種主題下都適用的實心或造型背景。
3. 匯出 32x32 與 16x16 尺寸，並在像素編輯器中手動修飾小尺寸版本。
4. 使用產生器產生完整套組（ICO、PNG、apple-touch-icon、manifest 圖示）。
5. 加入 link 標籤、設定快取標頭、部署，並用檢查工具驗證。

Favicon 是您網站上最小的資源之一，卻也是最常被看見的之一。在對比、簡潔與一致性上做出幾個審慎的決定，就能讓它在每個分頁、主題與裝置上都發揮作用。

常見問題

Favicon 應該是什麼尺寸？

瀏覽器分頁請以 16x16 和 32x32 設計（瀏覽器在高像素密度顯示器上會使用 32x32），為 iOS 提供 180x180 的 apple-touch-icon，並為 Android 與 PWA 提供 192x192 和 512x512 的 PNG。至於 Google 搜尋結果，請使用尺寸為 48 像素倍數的方形圖示，例如 48x48 或 96x96。SVG 來源可縮放至以上所有尺寸。

我應該用完整標誌當作 Favicon 嗎？

通常不建議。附有文字標誌的完整標誌太過細緻，也太寬，不適合放進方形的 16x16 圖示。請使用標誌符號或一到兩個字母的字母組合圖樣，並加以簡化，讓它在縮到很小時仍可辨識。

如何讓 Favicon 在深色模式下正常運作？

最安全的做法是為圖示加上專屬的實心背景形狀或對比輪廓，使其不依賴分頁顏色。或者，使用帶有 prefers-color-scheme 媒體查詢的 SVG Favicon 來切換顏色，並為不支援 SVG 圖示的瀏覽器保留 PNG 或 ICO 備援。請務必在淺色與深色主題下都進行測試。

為什麼我的新 Favicon 沒有顯示？

瀏覽器會將 Favicon 快取很長一段時間，而 Google 也會儲存自己的副本，並依自己的排程更新，通常需要數天或數週。請強制重新整理頁面、清除瀏覽器快取、使用帶有新版本的檔名，並確認 link 標籤與根目錄的 /favicon.ico 指向正確的檔案。您可以使用 MakeFav 檢查工具驗證設定。

在 Favicon 上顯示通知徽章是個好主意嗎？

是的，只要節制使用。小圓點或一到兩位數字的計數，能幫助使用者注意到需要處理的事項，但持續的動畫或過大的數字會損害辨識度並分散注意力。請務必在頁面標題中同步呈現狀態，在項目處理完畢後恢復預設圖示，並且不要只依賴顏色。