ICO 檔案製作指南：如何製作 Windows 圖示與 favicon

ICO 檔案是 Windows 應用程式圖示與網站 favicon 的重要基礎。與只包含單張圖片的其他格式不同，ICO 可將多種尺寸整合在同一個檔案中，讓 Windows 和瀏覽器選擇更接近所需顯示尺寸的圖示。本指南將從 ICO 格式的基礎開始，逐步說明如何製作專業圖示。

什麼是 ICO 格式？

ICO 是 Microsoft 專為圖示開發的容器格式。它最主要的特點，是能在單一 .ico 檔案中，一併儲存多張尺寸和色彩深度不同的圖片。

Windows 或網頁瀏覽器需要顯示圖示時，會在 ICO 檔案中尋找最符合所需尺寸的圖片。提供多種尺寸可減少縮放。請在 16×16、32×32 和 256×256 下檢查設計；細節在較小尺寸下仍可能變得不清楚。

ICO 的主要特性：

• 可容納多張內嵌圖片
• 每張內嵌圖片可有不同尺寸與色彩深度
• 透過 PNG-32 編碼支援完整透明度

請確認使用端接受 ICO，以及您提供的尺寸。

為什麼需要 ICO 檔案？

Windows 應用程式

Windows 作業系統廣泛使用 ICO 檔案：

• 桌面捷徑與應用程式圖示
• 工作列圖示
• 開始功能表圖示
• 檔案關聯圖示（特定檔案類型顯示的圖示）
• Alt+Tab 切換視窗時的圖示

如果沒有合適的 ICO 檔案，應用程式就會顯示 Windows 預設的通用圖示，讓人一眼就覺得產品尚未完成。

網站 favicon

每個網站都需要 favicon，這個小圖示會出現在：

• 瀏覽器分頁
• 書籤清單
• 瀏覽紀錄
• 主畫面捷徑（儲存到行動裝置時）
• 網址列

請確認使用端接受 ICO，以及您提供的尺寸。

如何製作 ICO 檔案？

若以 PNG 為原始圖片，且需要自行選擇圖示尺寸，請使用 PNG 轉 ICO：

1. 上傳一個不超過 20 MB 的 PNG。
2. 選擇 16、32、48、64、128 或 256 px；預設勾選 32、64 和 128。
3. 轉換、下載並解壓縮 icons.zip。
4. 選用單一尺寸的 ICO，或內含所有已選尺寸的 favicon.ico。

長方形原始圖片會等比例放入正方形，周圍以透明留白補足。若希望主體占據更多圖示空間，請先裁切為正方形。若需要包含 PNG 與資訊清單的固定網站套件，favicon 產生器可接受一張圖片，但不提供尺寸選擇。

不同用途需要的尺寸

請依實際使用環境選擇尺寸。本站提供 16、32、48、64、128 和 256 px，不提供 24 px。請納入應用程式或瀏覽器版面需要的尺寸，並檢查最小尺寸的圖示。沒有任何尺寸組合能保證在所有情境下都相容或清晰。

圖示設計建議

以簡單為優先

圖示的顯示尺寸很小。在 512×512 下精緻細膩的設計，縮小至 16×16 時可能變成難以辨識的模糊圖案。有效的圖示設計，與其他視覺設計有不同原則：

• 使用鮮明、簡單的形狀 — 以粗實的幾何造型為主，避免複雜插畫
• 高對比 — 圖示在淺色與深色背景上都必須容易辨識
• 清楚的輪廓 — 即使沒有色彩細節，也應能辨認整體形狀
• 限制色彩數量 — 通常 3–5 色就足夠；太多顏色會讓小尺寸圖示顯得混亂

先從最小尺寸設計

最常見的錯誤，是先設計漂亮的大圖示，再期待縮小後仍有好效果。建議改用以下流程：

1. 設計前先思考圖示在 16×16 下的樣子
2. 以這項限制為前提進行設計
3. 再利用較大尺寸補充細節並修飾
4. 定稿前確認所有尺寸都顯示正常

避免細微細節

在小尺寸下，以下元素容易出問題：

• 細線 — 可能消失或變得模糊；筆畫寬度至少使用 2px
• 小字 — 小於約 32px 時難以閱讀；圖示中應盡量避免文字
• 漸層 — 大尺寸下可能很好看，縮小後卻可能變成單調的色塊
• 陰影 — 經常讓小尺寸圖示顯得模糊

將現有圖片轉為 ICO

從 PNG 轉換（最常見）

PNG 是適合轉換 ICO 的原始格式：

• 具有透明背景的正方形 PNG
• 高解析度（512×512 或更大）
• 乾淨、平滑的邊緣
• 沒有壓縮失真

從 JPG 轉換

JPG 也能使用，但有以下限制：

• 不支援透明度 — 需要透明的區域必須手動處理
• 若不是正方形，請先裁切為正方形
• JPG 壓縮失真在小尺寸下可能變得明顯

從 SVG 轉換

SVG 可無限縮放，因此是很好的起點：

• 先將 SVG 匯出為高解析度 PNG（512×512 或 1024×1024）
• 再將 PNG 轉為 ICO
• 檢查匯出的 PNG 與各個 ICO 尺寸；向量圖原始檔不保證細節在小尺寸輸出時仍能保留

網站 favicon 的 HTML 設定

基本設定

基本的 favicon 連結：

<link rel="icon" type="image/x-icon" href="/favicon.ico">

請放在 HTML 的 <head> 區塊中。即使沒有任何 HTML 宣告，大多數瀏覽器也會自動尋找根目錄中的 favicon.ico，但加入連結標籤更可靠。

現代多格式設定

若要在各種平台與裝置上獲得較好的效果，請使用多種格式：

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG favicons for modern browsers -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple touch icon for iOS home screen -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

請上傳每個引用的檔案，並在目標瀏覽器和裝置上測試圖示。

網頁應用程式資訊清單

漸進式網頁應用程式（PWA）也應加入資訊清單檔案：

<link rel="manifest" href="/site.webmanifest">

資訊清單會引用較大的圖示尺寸（192×192 和 512×512），供網站安裝為主畫面應用程式時使用。

整合 Windows 應用程式圖示

嵌入應用程式資源

桌面應用程式開發者可直接將 ICO 檔案嵌入應用程式：

• 在 Visual Studio 中，將 .ico 檔案加入資源
• 在應用程式資訊清單中引用
• Windows 會依顯示情境自動使用合適的尺寸

檔案類型關聯

若希望某種檔案類型（例如 .myapp 檔案）使用特定圖示：

• 在 Windows 登錄中註冊副檔名
• 指向應用程式的執行檔，或獨立的 ICO 檔案
• 檔案總管會為該類型的所有檔案顯示這個圖示

圖示品質問題排解

圖示模糊

原因： ICO 檔案缺少實際需要的尺寸，因此 Windows 會從最接近的可用尺寸縮放。

解決方式： 納入所有常用尺寸（16、32、48、256）。可使用 IcoFX 或 Resource Hacker 等工具，檢查 ICO 內含哪些尺寸。

邊緣有鋸齒

原因： 使用只有透明與不透明兩種狀態的透明度（1 位元），而非完整的 Alpha 透明度。

解決方式： 使用具有完整 Alpha 色版的 PNG-32 原始檔。現代 ICO 格式支援在容器內使用 PNG-32 編碼。

瀏覽器沒有顯示 favicon

原因： 瀏覽器快取、HTML 錯誤，或檔案路徑不正確。

解決方式：

1. 清除瀏覽器快取並強制重新整理（Ctrl+Shift+R 或 Cmd+Shift+R）
2. 確認 <link> 標籤位於 <head> 中，且 href 路徑正確
3. 確認檔案確實可存取（直接開啟 URL 測試）
4. 確認檔案格式正確（使用 favicon 驗證工具）

測試圖示

發布前，請確認圖示在各種情境下都顯示正常：

Windows 顯示情境

• 工作列（小尺寸，通常由 32×32 縮放為 24×24）
• 桌面捷徑（中尺寸，通常為 48×48）
• 檔案總管的大圖示檢視（96×96 或 128×128）
• 超大圖示（256×256）
• Windows 11 開始功能表（多種尺寸）

瀏覽器情境

• 瀏覽器分頁（16×16 或 32×32）
• 書籤列
• 瀏覽紀錄清單
• 行動裝置上的主畫面捷徑圖示

背景測試

• 淺色背景（最常見的情境）
• 深色模式／深色背景（越來越重要）
• 彩色工作列與工具列

常見問題

ICO 檔案應包含哪些尺寸？

請依實際使用環境選擇尺寸。本站提供 16、32、48、64、128 和 256 px，不提供 24 px。請納入應用程式或瀏覽器版面需要的尺寸，並檢查最小尺寸的圖示。沒有任何尺寸組合能保證在所有情境下都相容或清晰。

favicon 可以用 PNG 取代 ICO 嗎？

可以，現代瀏覽器支援以 <link rel="icon" type="image/png" ...> 設定 PNG favicon。不過，ICO 的相容範圍最廣，特別是舊版瀏覽器、電子郵件用戶端，以及預設會在根目錄尋找 favicon.ico 的部分第三方工具。

為什麼圖示看起來模糊？

ICO 檔案缺少 Windows 或瀏覽器實際要顯示的尺寸。請納入所有必要尺寸。可使用 IcoFX、Resource Hacker 或線上 ICO 檢查工具確認檔案內容。

圖示一定要是正方形嗎？

長方形圖片會等比例放入正方形，周圍以透明留白補足。轉換工具不會自動裁切或拉伸圖片。

如何製作透明圖示？

請從已具有透明度的 PNG 開始。轉換工具會保留原始 Alpha 色版，不需要另外啟用開關。解壓縮 ZIP 後，請檢查各個尺寸；細微邊緣可能在縮放時改變。

結論

了解 ICO 是可容納多種尺寸的容器，而非單張圖片後，製作合適的 ICO 檔案就不難。請從乾淨、正方形、高解析度的 PNG 原始圖片開始，納入使用情境所需的所有尺寸，在不同顯示環境中測試，並逐一檢查各個預計顯示尺寸的結果。

若要從支援的 PNG、JPG、WebP、GIF 或 SVG 圖片製作 ICO 檔案，請使用我們的 ICO 轉換工具，它會自動產生可用的尺寸。

製作 ICO 檔案 →

---

相關工具：favicon 產生器 | 圖片尺寸調整工具 | PNG 轉換工具