使用方法
- 貼上圖示的 Base64 字串或 data URI,也可以貼上想要製作成圖示的圖片。
- 檢視預覽和尺寸。源圖片是正方形時,圖示效果最乾淨。
- 下載格式已預設為 ICO。選擇一個尺寸(16、32、48、64、128 或 256 像素),或選擇多尺寸圖示。
- 下載 .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 × 48 | Windows 桌面和資源管理器圖示 |
| 64、128 | 較大的預覽和應用列表 |
| 256 × 256 | Windows 的大圖示和超大圖示檢視 |
多尺寸選項會把 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 資料儲存,圓角和柔和邊緣都會保持透明。