什麼是 Favicon？
一篇講清網站圖示是什麼、用來做什麼，以及它如何加強品牌和瀏覽體驗的指南。也適合想自己做網站圖示的人。
Favicon 是什麼
Favicon 是 favorite icon 的縮寫，是代表網站或頁面的小圖示。它會出現在瀏覽器和裝置的多個位置，最常見的是分頁標題旁邊，也出現在書籤、瀏覽紀錄，以及把網站加到手機主畫面時的捷徑圖示。
網站圖示一般是正方形，常見 16×16、32×32 或 48×48 像素；現在也常用到 512×512，以配合高解析度螢幕和手機。
會出現在哪裡
網站圖示會出現在多個地方，幫使用者認出並找到你的網站：
- 瀏覽器分頁： 最顯眼的位置，出現在瀏覽器分頁標題旁邊
- 書籤： 出現在書籤列表裡，書籤名稱旁邊
- 瀏覽紀錄： 出現在瀏覽紀錄選單裡
- 網址列： 部分瀏覽器會在網址列顯示
- 手機主畫面： 使用者把網站加到主畫面時，它會當作應用圖示
- 搜尋結果： 部分搜尋引擎會在結果旁顯示網站圖示
範例：分頁和書籤裡的網站圖示
為什麼重要
網站圖示對品牌和瀏覽體驗都很關鍵：
品牌辨識
設計得當的圖示能讓使用者在一堆開啟的分頁裡立刻認出你的網站，強化品牌，也更好記。
看起來更完整
自訂圖示會讓網站顯得更認真。沒有它時，瀏覽器會顯示通用圖示，網站會看起來沒做完。
更好找
在書籤、紀錄和多個分頁之間，圖示能幫使用者更快找到你的網站。經常造訪的人尤其明顯。
手機體驗
在手機上，把網站加到主畫面時，圖示會當作應用圖示。清晰可辨的圖示會讓體驗更好。
格式和尺寸
現代網站應提供多種格式和尺寸，才能在各類瀏覽器和裝置上正常顯示：
ICO 格式
傳統的 favicon.ico，常見 16×16 或 32×32。相容性最好，所有瀏覽器都能用。
PNG 格式
PNG 常用於 16×16、32×32、48×48、96×96、180×180、192×192、512×512 等尺寸，畫質更好，也支援透明。
SVG 格式
SVG 不依賴解析度，任意大小都清晰。現代瀏覽器已支援，適合高解析度螢幕。
Apple Touch Icon
蘋果裝置用 apple-touch-icon.png，一般為 180×180，作為主畫面圖示，加到 iOS 主畫面時更像樣。
尺寸範例
16×16
32×32
48×48
96×96範例：同一圖示在不同尺寸下的樣子
設計建議
做網站圖示時，可以記住這些原則：
- 盡量簡單： 圖示很小，簡單圖形最有效。細碎細節在小尺寸下會看不見
- 對比要夠： 顏色對比要足，才能在各種瀏覽器背景下看得清
- 和品牌一致： 圖示應能看出是你的品牌，和整體視覺統一
- 能放大縮小： 從 16×16 到 512×512 都要能看清
- 要實測： 在不同瀏覽器和裝置上檢查顯示是否正確
好例子：簡單、對比強
避免：過於複雜或對比不足
怎麼做網站圖示
現在用工具做網站圖示很方便。無論從零開始還是用現有設計，都可以：
用線上產生器
logo87.com 這類工具可以很快做出一套圖示。輸入文字、選顏色和字體，下載包含所需尺寸和格式的完整包。沒有設計經驗也能做。
從現有圖片轉換
如果已有 logo 或圖片，可以用 SVG 轉 PNG 轉成所需格式和尺寸，做出和品牌一致的圖示。
從零設計
設計師也可以用繪圖軟體逐像素做，所有尺寸都精確控制。
小結
網站圖示雖小，卻是網站識別的一部分。它幫使用者認出你的網站、加強品牌，也改善瀏覽體驗。提供多種格式和尺寸，才能在各類瀏覽器和裝置上看起來完整、顯示正常。
無論用線上產生器、從現有圖片轉換，還是從零設計，認真做一套圖示都是對專業度和體驗的投資。