ICO vs PNG vs SVG：圖示格式完整比較，該用哪一種？
在為網站製作圖示或 Favicon 時，您可能會面臨一個常見的困惑：要用 ICO、PNG 還是 SVG？這三種格式各有其優勢和限制，適合不同的使用場景。本文從多個面向深入比較，幫助您做出最明智的選擇。
容器格式，可包含多尺寸圖片，Windows 標準格式
光柵格式，支援透明背景，現代瀏覽器廣泛支援
向量格式，無限縮放不失真，支援深色模式
三種格式的基本特性
ICO（Icon Format）
ICO 是由 Microsoft 為 Windows 系統開發的圖示格式，自 1985 年 Windows 1.0 起就存在。它最大的特點是容器性質：一個 ICO 檔案可以包含多個不同尺寸（16×16 到 256×256）和色深的圖片，讓作業系統根據顯示需求自動選擇最合適的版本。
- 可包含多個尺寸和色深的圖片
- Windows 系統的標準圖示格式
- 自 1985 年起被廣泛支援
- 現代 ICO 支援嵌入 PNG 資料（Vista 後）
- 支援 Alpha 透明通道（32 位元色）
PNG（Portable Network Graphics）
PNG 是 1996 年開發的無損壓縮光柵圖片格式。它以完整的 Alpha 透明通道支援著稱，是替代 GIF 的現代標準。在 Favicon 領域，現代瀏覽器普遍支援 PNG 格式，使用方便，無需特殊轉換工具。
- 單一尺寸，每個尺寸需要一個獨立檔案
- 完整 Alpha 透明通道支援
- 無損壓縮，畫質完整保留
- 所有主流瀏覽器支援
- 製作工具最為普及
SVG（Scalable Vector Graphics）
SVG 是基於 XML 的向量圖形格式，最大特點是無限縮放不失真。SVG Favicon 是目前最現代的做法，可以完美支援 Retina/HiDPI 螢幕，也可透過 CSS 實現深色模式自動切換。
- 向量格式，任何尺寸都完美清晰
- 支援 CSS 媒體查詢（深色模式適配）
- 通常檔案最小（簡單圖形）
- 可用 CSS/JavaScript 動態修改
- 部分瀏覽器（Safari）支援尚不完整
完整功能比較表
| 比較項目 | ICO | PNG | SVG |
|---|---|---|---|
| 格式類型 | 光柵（容器） | 光柵 | 向量 |
| 縮放品質 | 固定尺寸，多尺寸版本 | 固定尺寸，縮放有失真 | 無限縮放不失真 |
| 透明背景 | 支援（Alpha 通道） | 完整支援 | 完整支援 |
| 多尺寸支援 | 原生支援（單一檔案） | 不支援（每尺寸一個檔案） | 無限縮放 |
| 深色模式適配 | 不支援 | 不支援 | 支援（CSS media query） |
| 動畫支援 | 不支援 | 不支援（需用 APNG） | 支援（SMIL/CSS 動畫） |
| Windows 桌面圖示 | 完整支援（標準格式） | 不直接支援 | 不支援 |
| 瀏覽器 Favicon | 所有瀏覽器 | 現代瀏覽器 | Chrome、Firefox 支援 |
| 可編輯性 | 需要專用工具 | 各種圖像工具 | 文字編輯器即可 |
| 相對檔案大小 | 中（含多尺寸） | 中（單尺寸） | 小（簡單圖形） |
瀏覽器支援詳細比較
| 瀏覽器 | ICO Favicon | PNG Favicon | SVG Favicon |
|---|---|---|---|
| Chrome 80+ | 完整支援 | 完整支援 | 完整支援 |
| Firefox 80+ | 完整支援 | 完整支援 | 完整支援 |
| Safari 14+ | 完整支援 | 完整支援 | 部分支援 |
| Edge 80+ | 完整支援 | 完整支援 | 完整支援 |
| IE 11 | 完整支援 | 基本支援 | 不支援 |
| iOS Safari 14+ | 支援 | 支援 | 部分支援 |
各格式的最佳使用場景
ICO Windows 應用程式
Windows .exe 圖示、資料夾圖示，以及需要廣泛相容性的 Favicon。
ICO+SVG 現代網站 Favicon
最佳策略：ICO 作為回退，SVG 作為現代瀏覽器的優先選擇。
PNG App 圖示
iOS、Android 各尺寸 App 圖示，以及 PWA 的 manifest 圖示。
SVG 現代瀏覽器圖示
支援深色模式的 Favicon，需要動態修改色彩的圖示場景。
ICO 老舊瀏覽器相容
需要支援 IE11 或其他老舊瀏覽器的場景，ICO 是唯一可靠選擇。
PNG Apple Touch Icon
iOS 主畫面圖示（Apple Touch Icon）必須使用 PNG 格式。
檔案大小比較
以一個簡單的圖示為例，各格式的典型檔案大小：
| 格式 | 典型檔案大小 | 說明 |
|---|---|---|
| ICO（16+32+48×3 尺寸） | 5-25 KB | 包含多個尺寸，但共享一個檔案，總體較小 |
| PNG 16×16 | 0.5-2 KB | 單一尺寸，檔案最小，但需要多個檔案 |
| PNG 32×32 | 1-5 KB | 常見 Favicon 尺寸 |
| PNG 192×192 | 8-30 KB | PWA 用途 |
| SVG（簡單圖形） | 0.5-5 KB | 向量格式，簡單圖形時最小；複雜圖形可能更大 |
效能考量：Favicon 的載入對整體網頁效能影響極小（通常在 DNS 快取後幾乎無影響），因此格式選擇應以功能需求為優先，而非檔案大小。
最終建議：哪種格式最適合我？
Favicon 設定的最佳實踐
最小配置：一個 32×32 的 ICO 檔案（favicon.ico）放在根目錄，可以滿足 99% 的使用場景。
推薦配置：ICO（向下相容）+ SVG（現代瀏覽器）+ PNG（Apple Touch Icon / PWA）三種格式並用，覆蓋所有使用場景。
Windows 應用程式：必須使用 ICO 格式，建議包含 16、32、48、256 四個尺寸。
快速決策指南
- 需要 Windows 桌面圖示 → ICO（必須）
- 需要廣泛相容性的 Favicon → ICO
- 現代網站 Favicon，想要最佳效果 → ICO + SVG
- iOS 主畫面圖示 → PNG（180×180）
- Android PWA 圖示 → PNG（192×192 和 512×512）
- 需要深色模式自動適配 → SVG
- 最簡單的做法 → ICO（一個檔案解決最多問題）
準備好製作您的 ICO 圖示了嗎？使用我們的免費工具，只需幾秒鐘即可將您的圖片轉換為 ICO 格式。
免費製作 ICO 圖示