UltKit

圖片轉 ICO 轉換器

用手邊任何圖片製作 favicon.ico 或 Windows 圖示:logo 的 PNG、設計師給的 SVG、品牌素材裡的 JPG,甚至手機拍的照片都可以。輸出的檔案內含多種尺寸。下方說明哪種來源圖效果最好,以及各平台還需要哪些圖示檔案。

圖片轉換器

或將JPG, JPEG, JPE … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    選擇最乾淨的來源圖片

    上傳要當作圖示的圖片,建議使用 256 × 256 px 以上的正方形標誌或符號。

  2. 2

    圖示尺寸保持「全部」

    在進階設定中,圖示尺寸預設為所有尺寸(16–256)。只有在程式明確要求單一尺寸時,才需要改選單一尺寸。

  3. 3

    轉換並測試

    按下轉換為 ICO,下載檔案後,先在瀏覽器分頁或桌面上看看效果,再正式發布。

解答

如何把圖片轉成 ICO 圖示?

上傳至少 256 × 256 px 的正方形圖片,將圖示尺寸保持為所有尺寸(16–256),然後按下轉換為 ICO。你會得到一個包含 16、32、64、128 和 256 px 版本的檔案,可直接當作 favicon.ico 或 Windows 捷徑圖示使用。

圖片轉 ICO:該用哪張來源圖片

ICO 是 Microsoft 的圖示容器格式,歷史與 Windows 一樣久。它存放的不是單一圖片,而是一個小型圖片目錄,而且自 Windows Vista 起,最大的 256 px 項目可以用 PNG 壓縮。瀏覽器在 1999 年開始採用這個格式,當時 Internet Explorer 5 會向每個網站請求 /favicon.ico。

由於轉換器會把圖片縮小到最小 16 px,來源圖片對結果的影響遠大於任何設定。上傳前先評估手邊有哪些素材,如果圖片偏寬,請先裁成正方形;裁切圖片工具幾秒鐘就能設定 1:1 的裁切框。

  1. 向量標誌(SVG、EPS、AI)

    每種尺寸都會重新點陣化,邊緣保持銳利。如果設計師能提供,這是最佳選擇。

  2. 透明背景的 PNG 或 WebP

    保留分頁列可透出的透明背景。請從 256 px 以上的圖開始。

  3. JPG、HEIC 或螢幕截圖

    可以使用,但方形背景會一併保留。請填色或裁切,讓四個角看起來是刻意設計的。

各平台會到哪裡找圖示檔案

1:1

32 × 32 px

favicon.ico(瀏覽器分頁)

分頁和書籤會使用 16 和 32 px;本頁產生的 ICO 兩種都涵蓋

1:1

256 × 256 px

Windows 捷徑或 .exe

大圖示檢視和高 DPI 螢幕會選用 256 px 項目

1:1

180 × 180 px

apple-touch-icon.png

使用 PNG 而非 ICO;當有人把網站加入 iPhone 主畫面時使用

1:1

512 × 512 px

Web app manifest 圖示

列在 manifest.json 中的 PNG,並搭配 192 px 版本,供可安裝的網頁應用程式使用

ANY I

任何圖片

此工具接受常見的圖片格式,包括 JPG、PNG、WebP、HEIC、GIF、BMP 與 TIFF。系統會自動從檔案偵測格式,因此您不需要知道圖片是哪一種類型。

Any image 轉檔工具

ICO

Windows 圖示

ICO 是 Microsoft 的圖示格式,用於 Windows 程式圖示和網站 favicon。單一 .ico 檔可包含多種尺寸的影像,例如 16×16、32×32、48×48 和 256×256 像素,讓系統挑選最合適的尺寸。每張影像可儲存為點陣圖或 PNG 資料,並支援完整的 Alpha 透明度。ICO 不適合用於照片或大型圖像。瀏覽器、Windows 和多數圖示編輯器都能讀取。

壓縮方式
無損
透明度
支援
動畫
不支援
推出年份
Microsoft
ICO 轉檔工具

人們會把任意圖片轉成 ICO,是因為瀏覽器分頁、Windows 捷徑或安裝程式需要一個 .ico 檔,而手邊只有其他格式的標誌、螢幕截圖或照片;從 ICO 擷取 PNG 則是反向操作,屬於圖稿還原。

轉成 ICO 前先做 16 px 清晰度測試

16 × 16 px 的圖示總共只有 256 個像素。完整的文字標誌會變成一團灰色;單一粗體字母或符號則能保持辨識度。轉換前,先用任何檢視器把來源圖縮小到 16 px,想想在 30 個開啟的分頁中,你是否還認得出它。

對比和形狀一樣重要。分頁會出現在淺色與深色瀏覽器主題上,因此透明背景上的黑色標誌在深色模式下可能看不見。在符號後面加一圈淺色細邊,或墊一個實心圓角方形,就能在兩種主題下都清楚可見。若是 macOS 應用程式套件,則需要 ICNS;PNG 轉 ICNS可用同一份圖稿建立該檔案。

圖片轉 ICO 常見問題

這個頁面可以把哪些圖片格式轉成 ICO?

轉換器能讀取的圖片都可以,包括 PNG、JPG、SVG、WebP、AVIF、HEIC、GIF、BMP、TIFF、PSD 和相機 RAW 檔。透明背景的 PNG 或 SVG 邊緣最乾淨;JPG 也能用,但會連同矩形背景一起帶進去。

只有 favicon.ico 就夠了,還是需要其他圖示檔案?

.ico 適用於各種瀏覽器的分頁與書籤。iPhone 和 iPad 會尋找名為 apple-touch-icon、尺寸 180 × 180 px 的 PNG;而 Chrome 只有在網站的 web manifest 列出 192 和 512 px 的 PNG 圖示時,才會提供將網站安裝成應用程式的選項。

Windows 需要 ICO 裡有 48 px 的圖片嗎?

檔案總管的中圖示檢視會以 48 px 繪製圖示。檔案裡沒有 48 px 的項目時,Windows 會縮放下一個較大的尺寸,這裡就是 64 px 的圖像,對線條粗的圖案通常看起來沒問題,但細緻的線條可能會變模糊。

一個 ICO 能在 16 px 和 256 px 顯示不同的圖案嗎?

格式本身允許這樣做,系統圖示在最小尺寸時也常改用簡化的圖案。不過本轉換器是把同一張圖縮放成所有尺寸。如果 16 px 版本需要另外繪製,請單獨匯出該圖稿,並將圖示尺寸設為 16 px 後再轉換。

轉換前要怎麼確認圖示在 16 px 下看得清楚?

用任何編輯器把圖縮小到 16 px,並以 100% 檢視。如果看不出是什麼,就減少細節:拿掉標語,只留下首字母或符號,並把細線加粗。

favicon.ico 應該上傳到網站的哪個位置?

請放在網站根目錄,讓 /favicon.ico 可以直接存取,因為即使沒有任何標籤指向它,瀏覽器也會請求這個位址。若在頁面 head 加入 rel="icon" 的 link 標籤,就能放在其他位置。