ICO 轉 Base64 工具

將 .ico 網站圖示編碼為 Base64,直接嵌入網頁。原檔案不做任何改動,圖示中儲存的每一種尺寸都會保留。

完全在瀏覽器中執行,不會上傳任何資料。

使用方法

  1. 將 .ico 檔案拖到上傳區域,點選選擇檔案,或貼上圖片。
  2. 保持原格式,圖示中儲存的所有尺寸都會保留在輸出中。
  3. 檢視編碼後大小,包含多種尺寸的圖示可能比預想的更大。
  4. 複製 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 檔案。

如何從 Base64 生成 ICO 檔案?
把 PNG 的 Base64 或 Data URI 貼上到 Base64 轉 ICO 中,選擇需要的尺寸並下載 .ico 檔案。