ICO 格式完整指南：歷史、結構與現代應用
如果您曾經為網站製作 Favicon，或者替 Windows 應用程式設計圖示，您一定遇過 .ico 這個副檔名。ICO 是一種歷史悠久但至今仍被廣泛使用的圖示格式，本文將帶您深入了解它的一切。
ICO 格式的起源與歷史
ICO 格式誕生於 1985 年，隨 Windows 1.0 一同推出。當時的目標很簡單：為桌面圖示提供一種標準格式，讓作業系統能夠識別並顯示應用程式的視覺標識。
在那個年代，ICO 格式只需要支援 16×16 像素、16 色的單一圖示。隨著螢幕解析度的提升和 Windows 版本的演進，ICO 格式也逐漸擴展，先後支援了 32 色、256 色，最終到 Windows XP 時代開始支援 32 位元色彩（含 Alpha 透明通道）和更大的尺寸。
到了 Windows Vista 時代，ICO 格式迎來了重大更新：支援將 PNG 圖片直接嵌入 ICO 容器，讓 256×256 的高解析度圖示在保持透明背景的同時，也能大幅縮小檔案大小。這個改變沿用至今。
2000 年代初期，隨著網際網路的普及，ICO 格式從桌面世界延伸到了網頁世界。IE 5 率先支援在瀏覽器分頁顯示 Favicon，從此 favicon.ico 成為每個網站幾乎必備的檔案。
ICO 格式的技術結構
ICO 是一種容器格式（Container Format），類似 ZIP 壓縮檔的概念：它可以包含多個不同尺寸和色深的圖片，儲存在單一 .ico 檔案中。
一個標準的 ICO 檔案由以下部分組成：
- ICONDIR 標頭 — 6 個位元組，記錄檔案類型（固定為圖示格式）和包含的圖示數量
- ICONDIRENTRY 目錄 — 每個嵌入圖示一條目錄項目（16 個位元組），記錄該圖示的寬度、高度、色深、資料偏移量等資訊
- 圖示資料 — 各個圖示的實際像素資料，可以是 BMP 格式或 PNG 格式（Vista 起支援）
重點：現代 ICO 格式（Windows Vista 及之後版本）支援直接嵌入 PNG 資料，讓圖示同時具備 PNG 的完整透明度支援和出色的壓縮率。本工具生成的 ICO 檔案即採用此現代標準。
ICO 支援的標準尺寸
Windows 和各種作業系統會根據顯示場景自動從 ICO 檔案中選擇最合適的尺寸。以下是常見的標準尺寸及其使用場景：
| 尺寸 | 主要用途 | 說明 |
|---|---|---|
| 16×16 | 瀏覽器分頁 Favicon、工具列 | 最常用的 Favicon 尺寸，幾乎所有瀏覽器都會顯示 |
| 32×32 | Windows 工作列、書籤圖示 | 標準桌面圖示大小，高解析度螢幕的 Favicon |
| 48×48 | Windows 桌面圖示（中型） | Windows 資源管理器預設中型圖示大小 |
| 64×64 | Windows 桌面圖示（大型） | 適合高 DPI 螢幕的桌面顯示 |
| 128×128 | macOS Dock（部分程式） | 高解析度顯示場景 |
| 256×256 | Windows 超大圖示、縮略圖 | Vista 後支援，適合高 DPI 和 Retina 螢幕 |
專業的 ICO 檔案通常會包含多個尺寸，讓作業系統根據顯示需求自動選擇。例如，一個完整的 Windows 應用程式圖示可能包含 16、24、32、48、64、128、256 等多個尺寸。
ICO 在網頁開發中的應用
Favicon 的基本設定
最基本的 Favicon 設定只需要將 favicon.ico 放在網站根目錄，瀏覽器會自動嘗試載入它，無需在 HTML 中特別宣告：
https://yourdomain.com/favicon.ico
不過，建議在 HTML 的 <head> 中明確宣告，以確保最佳相容性：
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="shortcut icon" href="/favicon.ico">
現代完整 Favicon 設定
現代網頁開發建議同時提供 ICO 和 PNG 格式，並針對不同裝置提供對應尺寸：
<!-- 標準 Favicon（ICO 格式，向下相容） -->
<link rel="icon" href="/favicon.ico" sizes="48x48">
<!-- SVG Favicon（現代瀏覽器，支援深色模式） -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/apple-icon.png">
<!-- PWA 圖示 manifest -->
<link rel="manifest" href="/manifest.webmanifest">
ICO 檔案的色彩深度
ICO 格式支援多種色彩深度，每種都有其適用場景：
| 色彩深度 | 顏色數量 | 透明度 | 適用場景 |
|---|---|---|---|
| 1 位元 | 2 色（黑白） | 二值透明 | 單色圖示（已廢棄） |
| 4 位元 | 16 色 | 二值透明 | 極簡圖示（已廢棄） |
| 8 位元 | 256 色 | 二值透明 | 舊版相容（已少用） |
| 24 位元 | 1670 萬色 | 不支援 | 無透明需求的彩色圖示 |
| 32 位元 | 1670 萬色 + Alpha | 8 位元漸層透明 | 現代標準，支援半透明效果 |
| PNG 嵌入 | 完整 PNG 色彩 | 完整 Alpha 通道 | Vista 後最佳選擇，檔案小 |
製作高品質 ICO 的建議
使用高解析度原始圖片
建議使用至少 256×256 像素的原始圖片進行轉換。從高解析度圖片縮小到各種尺寸，可以保留最多的視覺細節；相反，從小圖放大後再縮小，會導致圖示模糊失真。
保持設計簡潔
ICO 圖示在 16×16 等小尺寸下，複雜的細節會完全看不清楚。設計時應該以最小尺寸（16×16）為基準，確保圖示在最小的情況下仍然清晰可辨。
善用透明背景
現代 ICO 格式支援完整的 Alpha 透明通道。使用透明背景的圖示可以在任何背景色上顯示，無論是白色還是深色主題都能良好適應。
測試各種尺寸
製作完成後，務必在不同的顯示情境下測試您的圖示：瀏覽器分頁、書籤列、Windows 工作列等，確保在所有場景下都清晰可辨。
ICO 的現代替代方案
雖然 ICO 格式至今仍是許多場景的標準，但現代網頁開發中也逐漸引入了其他格式作為補充或替代：
- PNG Favicon — 現代瀏覽器支援直接使用 PNG 作為 Favicon，更容易製作和管理
- SVG Favicon — Chrome 和 Firefox 支援 SVG Favicon，可完美縮放並支援深色模式適配
- WebP Favicon — 部分現代瀏覽器支援，檔案更小但相容性尚不完整
不過，為了確保最廣泛的相容性（尤其是老舊瀏覽器和 Windows 系統），提供 ICO 格式的 Favicon 仍然是業界標準做法。最佳策略是同時提供 ICO（向下相容）和 SVG 或 PNG（現代瀏覽器優化）兩種格式。
如何快速製作 ICO 檔案
了解了 ICO 格式的一切，現在您可以使用我們的免費線上工具快速製作 ICO 圖示：
- 準備一張高解析度（至少 256×256 px）的 PNG 圖片
- 使用我們的工具上傳並轉換
- 選擇您需要的尺寸（Favicon 建議使用 32×32）
- 下載 ICO 檔案，放置到您的網站根目錄