Favicon 最佳實務

文字長度

一個字最好。圖示經常以 16×16 到 32×32 顯示，一兩個字元最清楚。字一多就會糊、會擠。

字體選擇

選小尺寸仍然能認的字體：

• 粗體： 比細體、細字重更清楚
• 無襯線： 小尺寸下一般更好認
• 避免裝飾性或手寫體，縮小後會看不清
• 先看實際大小： 定稿前用 16×16 預覽

顏色對比

文字和背景對比要高。圖示會出現在淺色、深色、彩色等各種瀏覽器背景上，都要能看清。接近的顏色在小尺寸下會糊成一團。

簡單

保持簡潔。複雜細節在小尺寸下會消失。抓住一個能代表品牌或網站的圖形即可。

格式選擇

需要哪些尺寸

提供多種尺寸，才能在各類裝置和情境下顯示正常：

• 16×16： 標準分頁尺寸
• 32×32： 高解析度螢幕和部分瀏覽器情境
• 180×180： iOS 主畫面的 Apple Touch Icon
• 192×192 和 512×512： Android 主畫面圖示和 PWA

說明：始終在最大尺寸（512×512）上設計再縮小，不要從小圖放大。這樣各尺寸品質最好。

瀏覽器相容

在 Chrome、Firefox、Safari、Edge 以及桌面、手機、平板上測試。各瀏覽器處理略有不同，全面測試才能外觀一致。

直接用完整 Logo

除非 logo 極簡，否則不要整張塞進去。多數 logo 在 16×16 下細節太多、認不出。改用簡化版、字母標或品牌裡的關鍵圖形。

對比不夠

元素對比低時，小尺寸會看不見。要保證在不同瀏覽器主題和背景下都清楚。

檔案放錯位置

檔案通常放在 public 或 static，HTML link 的路徑必須指對。

只提供一種尺寸

只給一種尺寸會限制相容性。至少準備 16×16、32×32、180×180、192×192、512×512。

沒實測

上線前在多種瀏覽器和裝置上測。一個瀏覽器好看，另一個可能不對。用開發者工具確認圖示有沒有載入。