現代網頁設計最令人頭疼莫過於 Favicon（Favorites Icon 縮寫，中文「網站頭像」）。它出現在瀏覽器標籤、地址欄、收藏夾，甚至桌面快捷方式。超小尺寸、特殊 ICO 格式、跨瀏覽器差異，讓設計師費盡心力。本文完整拆解設計、導出、部署、更新全流程。

設計原則：小尺寸下捕獲品牌精髓

• 最常見形式：公司 Logo 標誌（非完整標誌+文字組合）。
• 排除文字（太小不可讀），例外：極具辨識度的單字母（維基百科 W、Facebook F、Disney D）。
• 每個像素皆計算在內，直縮 Logo 易模糊，必須像素級逐幀繪製。

制作流程

1. 位圖軟件逐像素編輯：PS/Pixelmator，先調整大 Logo 至 64×64px（最大需求尺寸），鉛筆工具逐像素修銳，耗時 1-2 小時但效果最佳。
2. 按比例產出全尺寸套裝：
   • 64×64 — Safari 閱讀列表 / Windows 網站圖標
   • 32×32 — 高 DPI/視網膜屏常用
   • 24×24 — IE9 固定網站
   • 16×16 — 瀏覽器標籤/地址欄最通用尺寸
3. 保存為 PNG → 轉 ICO：PS「存儲為 Web 格式」選 PNG，再用 X-Icon Editor 免費在線工具合成多尺寸 ICO。

部署與更新策略

• 將 favicon.ico 放網站根目錄，瀏覽器自動掃描 https://example.com/favicon.ico，勿藏入子目錄，勿加鏈接標籤（跨瀏覽器兼容性最佳）。
• 強制更新技巧：瀏覽器極度緩存 Favicon。開發期添加臨時 HTML：<link rel="icon" href="/favicon.ico?v=1">，更新時遞增 v 值，完成後立即移除該標籤。

進階：花樣繁複的新世代圖標

iOS Touch Icon、Windows Metro 磚塊、Google TV 圖標等需單獨適配。推薦查閱 Favicon 檢核清單，並關注 Favico.js 實現動態圖標（標記數量統計等），雖跨瀏覽器支援有限但極具潛力。

Favicon 雖小，卻是品牌在瀏覽器鏡中的縮影，值得精雕細琢。