Base64 轉 ICO

把 Base64 圖示資料儲存為 .ico 檔案,或用任意 Base64 圖片製作 favicon。可以選擇 16 到 256 像素的單一尺寸,也可以生成包含 16、32、48、256 的多尺寸圖示。

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

使用方法

  1. 貼上圖示的 Base64 字串或 data URI,也可以貼上想要製作成圖示的圖片。
  2. 檢視預覽和尺寸。源圖片是正方形時,圖示效果最乾淨。
  3. 下載格式已預設為 ICO。選擇一個尺寸(16、32、48、64、128 或 256 像素),或選擇多尺寸圖示。
  4. 下載 .ico 檔案。如果輸入本來就是 ICO,並且想原樣保留其中所有圖片,請選擇「原始檔案」。

Base64 中的 ICO 檔案

ICO 檔案是一個小型容器,由檔案頭、條目目錄以及每個條目對應的圖片組成,圖片以 BMP 或 PNG 資料儲存。檔案頭以位元組 00 00 01 00 開頭,因此圖示的 Base64 以 AAABAA 起始。Base64 圖示常見於 favicon 的 data URI(例如 <link rel="icon" href="data:image/x-icon;base64,...">)、單檔案 HTML 頁面以及返回網站圖示的介面中。

正式註冊的 MIME 型別是 image/vnd.microsoft.icon,但 image/x-icon 用得更廣,相容性也沒有問題。

圖示尺寸怎麼選

尺寸典型用途
16 × 16普通螢幕上的瀏覽器標籤頁和書籤
32 × 32高解析度螢幕上的瀏覽器標籤頁
48 × 48Windows 桌面和資源管理器圖示
64、128較大的預覽和應用列表
256 × 256Windows 的大圖示和超大圖示檢視

多尺寸選項會把 16、32、48 和 256 打包進同一個檔案,由系統自行挑選最合適的尺寸。其中的圖片採用 PNG 壓縮,能保留透明效果,Windows Vista 及更高版本和所有現代瀏覽器都支援。

把圖示用作網站 favicon

瀏覽器會自動從網站根目錄請求 /favicon.ico,所以即使不寫任何標籤,把檔案放在那裡也能生效。在 href 中使用 Base64 data URI 可以省掉這次請求,但圖示會隨每個頁面重新下載,無法單獨快取。現代瀏覽器同樣支援 PNG 和 SVG 圖示,常見的寫法是兩者結合:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/icon.svg" type="image/svg+xml">

請從形狀簡單、對比鮮明的正方形圖片開始製作,細小的細節在 16 像素下會完全看不清。如果還需要 PNG 版本,可以使用 Base64 轉 PNG。

常見問題

favicon.ico 應該做成多大?

包含 16、32 和 48 像素的多尺寸圖示即可滿足瀏覽器和 Windows 的需要。本工具的多尺寸選項還額外包含 256 像素,用於大圖示檢視。

可以把 Base64 PNG 或 SVG 轉成 ICO 嗎?

可以。粘貼後把下載格式保持為 ICO,再選擇尺寸即可。瀏覽器能顯示的任何圖片都可以轉換。

為什麼預覽只顯示圖示的一個尺寸?

一個 ICO 檔案可以包含多張圖片,但預覽只能顯示其中一張。以「原始檔案」格式下載,即可保留檔案中的全部圖片。

生成的 ICO 能保留透明背景嗎?

能。圖示以帶完整 Alpha 通道的 PNG 資料儲存,圓角和柔和邊緣都會保持透明。

怎樣把圖示放進 data URI?
先用 ICO 轉 Base64 編碼檔案,再把結果填入 <link rel="icon"> 標籤的 href 屬性。