使用方法
- 將 .ico 檔案拖到上傳區域,點選選擇檔案,或貼上圖片。
- 保持原格式,圖示中儲存的所有尺寸都會保留在輸出中。
- 檢視編碼後大小,包含多種尺寸的圖示可能比預想的更大。
- 複製 Data URI 用於 favicon 的 link 標籤,或複製 img 標籤、CSS、Markdown 輸出。
ICO 格式
ICO 是 Windows 的圖示格式,也是最早的 favicon 格式。它是一種容器:開頭的目錄列出一張或多張圖片的寬度、高度和色深,每張圖片以點陣圖資料儲存,256×256 這類大尺寸則以內嵌 PNG 的形式儲存。典型的 favicon.ico 包含 16、32 和 48 像素三種版本,瀏覽器會挑選最清晰的一種。
正式註冊的 MIME 型別是 image/vnd.microsoft.icon,但 image/x-icon 用得更普遍,瀏覽器兩者都接受。ICO 資料的 Base64 以 AAABAA 開頭,這是檔案頭編碼後的結果。
用 Data URI 作為 favicon
<link rel="icon" href="data:image/x-icon;base64,AAABAAEAEBA...">
內嵌 favicon 適合單檔案 HTML 文件,例如匯出的報告、儲存到本地的儀表盤和離線文件,也適合不想額外部署檔案的原型和內部工具。對於頁面很多的網站,普通的 /favicon.ico 通常更好:它只下載一次就會被快取,而 Data URI 會在每個 HTML 響應中重複出現。
如果完全不需要圖示,可以寫 <link rel="icon" href="data:,">,瀏覽器就不會再請求 /favicon.ico。
ICO、PNG 還是 SVG 圖示
現代瀏覽器同樣支援 PNG 和 SVG 格式的 favicon,例如 <link rel="icon" type="image/png" href="data:image/png;base64,...">。單張 32×32 的 PNG 往往比多尺寸 ICO 更小,可以使用 PNG 轉 Base64 或 SVG 轉 Base64。
在這裡把 ICO 轉換為 PNG、JPEG 或 WebP 時,只會保留一張圖片,即瀏覽器選擇顯示的那一張。如果要反過來生成 ICO 檔案,可以先編碼一張 PNG,再把結果貼上到 Base64 轉 ICO 中,它能輸出 16 到 256 像素的圖示。
常見問題
應該用 image/x-icon 還是 image/vnd.microsoft.icon?
image/vnd.microsoft.icon 是正式註冊的型別,image/x-icon 則是大多數網站的寫法。如果某個系統要求特定型別,複製後修改字首即可。Base64 輸出會保留所有圖示尺寸嗎?
保持原格式時會。整個檔案都被編碼,瀏覽器仍然可以挑選需要的尺寸。轉換為其他格式則只保留一張圖片。
Data URI 形式的 favicon 在所有瀏覽器中都有效嗎?
當前的桌面瀏覽器都會在標籤頁上顯示它。書籤、主螢幕快捷方式和一些舊瀏覽器可能會忽略內嵌圖示,因此公開網站仍應提供 favicon 檔案。