跳到主要內容

PNG 轉 ICO(favicon 產生器)

在瀏覽器本機把 PNG 圖片轉成多尺寸的 favicon.ico,免上傳、免費。

我們自己測的:真實檔案大小

設定: 頁面預設值

測試項目轉換前轉換後變化
透明標誌16 · 32 · 48 px28.8 KB951 B−97%
平面插畫16 · 32 · 48 px34.7 KB1.3 KB−96%
這些數字告訴你

兩個圖示都只有一千位元組上下——標誌 951 位元組、插畫 1.3 KB,省了 96–97%——而且每個檔案裡同時裝了 16、32、48 px 三種尺寸。favicon 天生就極小,所以來源解析度幾乎不影響結果;真正重要的是縮到 16 px 時圖形還看得出來。

2026-07-28 用 Chromium 151.0.7922.34 把這幾個檔案丟進「這一頁」實際跑出來的結果。每一頁都用同一組公開的測試檔,所以不同轉換器之間的數字可以互相比較。測試方法與原圖下載 →

PNG 轉 ICO 是什麼?

ICO 是 Windows 圖示與網站 favicon.ico 使用的格式,能在一個檔案裡放多種尺寸。這個工具把你的 PNG 產生成含 16/32/48 像素的 favicon.ico,全程在你的瀏覽器本機完成、不上傳。

如何使用

  1. 選擇或拖入一張 PNG(建議正方形、透明背景)。
  2. 工具會即時產生多尺寸預覽。
  3. 按「下載」取得 favicon.ico。

實用建議

  • 先把 logo 用去背/PNG 轉 SVG整理乾淨,favicon 會更銳利。
  • 圖示在 16px 下很小,細節越少越清楚。
  • 放到網站根目錄命名 favicon.ico 即可被自動辨識。

一個裝了三張圖的 ICO,為什麼比一張 PNG 還小 30 倍?

因為裡面那三張圖非常小。輸出的 ICO 同時放進 16、32、48 px 三格(原始碼裡就是這三個尺寸,每格存的是一段 PNG 流),合計 3,584 個像素;來源那張 1200 × 800 的標誌有 960,000 個 —— 像素少了 268 倍。而位元組是 28.8 KB → 951 B(-97%),只少了 31 倍。兩個倍率不一樣,結論就藏在差額裡:換算成每個像素,ICO 反而貴了 8.6 倍。小圖攤不掉自己的成本 —— 三段 PNG 各有一份標頭,外加 ICO 的目錄結構。插畫那一列也一樣:34.7 KB → 1.3 KB(-96%)。還有一個形狀上的行為要知道:縮放用的是等比例取小邊、然後置中,所以非方形的圖會在方格裡留下透明邊,不會被拉扁。

常見問題

我該餵大的 PNG 還是小的?

小的、簡單的。圖示顯示出來只有 16 到 48 px,細節不但浪費,還常常糊成一團。測試的透明標誌從 28.8 KB 變成 951 B、平面插畫從 34.7 KB 變成 1.3 KB,少了 97% 與 96% —— 這種圖才撐得住變成圖示。照片技術上轉得出來,但在瀏覽器分頁上你會認不出那是什麼。

我的圖片會被上傳嗎?

不會。轉換全程在你的瀏覽器本機完成,圖片不會上傳到任何伺服器,也不會被儲存。

產生的 ICO 有哪些尺寸?

會產生含 16×16、32×32、48×48 三種尺寸的單一 favicon.ico——這是瀏覽器分頁、書籤、桌面捷徑最常用的組合,系統會自動挑最合適的。

該用什麼圖當來源?

建議用「正方形、去背(透明)」的 PNG,圖示才不會被壓扁;非正方形會等比縮放並置中、周圍留透明。簡單、對比清楚的圖示在 16px 小尺寸下最清楚。

要怎麼用在網站上?

把下載的 favicon.ico 放到網站根目錄,或在 <head> 加 <link rel="icon" href="/favicon.ico">。多數瀏覽器也會自動抓根目錄的 /favicon.ico。

延伸閱讀

如何用圖片製作 favicon(免費) →

嵌入此工具

把這個工具免費放進你的網站或部落格 —— 複製下面的程式碼貼上即可(內含一條回到本站的連結)。