網站 Favicon 設定：ICO 格式與 HTML 標籤

現象

瀏覽器分頁標籤、書籤列顯示的小圖示 (如 CSDN 的 C 字圖示)。

標準做法

1. 準備 ICO 檔案：favicon.ico (16x16, 32x32, 48x48 多解析度內建)。
   工具：線上轉換 (favicon.io、realfavicongenerator.net)、PS 插件、ImageMagick 指令：
   convert icon.png -define icon:auto-resize=16,32,48,64 favicon.ico
2. 放置於網站根目錄：/favicon.ico — 瀏覽器**自動請求**，無需 HTML 標籤。
3. 或指定自訂路徑 (HTML)：

   <link rel="icon" type="image/x-icon" href="/assets/favicon.ico">
   <!-- 現代瀏覽器支援 PNG -->
   <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16.png">
   <!-- Apple Touch Icon -->
   <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
   

格式支援現況

最佳實務

• **同時提供 ICO (根目錄) + PNG/SVG (HTML 指定)**，覆蓋所有環境。
• ICO 內建 16/32/48px，PNG 提供 16/32/180px (Apple)。
• 設定長期快取：Cache-Control: public, max-age=31536000, immutable。
• 更新時修改檔名或查詢字串 ?v=2 強制重新下載。

線上產生工具

• RealFaviconGenerator：一次產生所有尺寸、HTML 片段、Web App Manifest。
• Favicon.io：簡單文字/圖片/Emoji 轉 ICO/PNG。

將 favicon.ico 放網站根目錄，並加上 <link rel="icon"> 標籤指定 PNG/SVG，即可完整支援各瀏覽器分頁圖示。