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

發佈於 2026年7月11日 · 更新於 2026年7月27日

瀏覽器分頁、書籤與瀏覽紀錄上的那個小圖示,就是 favicon。做得好,網站看起來更完整,在一堆分頁裡也更容易一眼認出。

這件事我們自己測過。 favicon 真的極小。我們那張透明標誌從 28.8 KB 的 PNG 變成 951 位元組的 ICO——而這一個檔案裡同時裝了 16、32、48 px 三種尺寸。正因為輸出這麼小,來源解析度幾乎不影響結果;真正重要的是縮到 16 px 時圖形還看得出來。看完整實測數據

favicon 到底是什麼

它通常放在 /favicon.ico,而 .ico 是一種能在單一檔案裡裝多種尺寸的容器——常見的是 16×16、32×32、48×48。瀏覽器會依情境(分頁、書籤、工具列)挑最合適的尺寸。這也是為什麼真正的 .ico 勝過單張 PNG:一個檔案在任何尺寸都清晰。

從方形圖片開始

用方形來源,最好 256×256 以上。非方形會被裁切或加黑邊。
保持簡單——在 16px 下細節會消失。單一字母、標記或粗實的形狀最清楚。
帶透明背景的 PNG 很適合。

製作 .ico——完全不上傳

你的 logo 就是品牌,沒必要傳到來路不明的伺服器。以下工具全程在瀏覽器本機執行:

PNG 轉 ICO / Favicon 產生器:拖入 PNG,得到含多種尺寸的 favicon.ico。

加到你的網站

把 favicon.ico 放在網站根目錄,並在頁面 head 內引用:

<link rel="icon" href="/favicon.ico" sizes="any">

現代瀏覽器也接受 PNG 圖示,許多網站兩者都放。若圖示沒更新,請強制重新整理——瀏覽器對 favicon 的快取非常積極。

想要的是可縮放的 logo,而不是固定尺寸的圖示?看如何把 PNG 轉成 SVG。

你實際需要哪些尺寸

一個 .ico 就涵蓋了傳統桌面的位置,但現代裝置還會多要幾張 PNG。以下是實用清單:

尺寸	檔案	用在哪裡
16×16、32×32、48×48	`favicon.ico`	瀏覽器分頁、書籤、Windows 捷徑
180×180	`apple-touch-icon.png`	iOS「加入主畫面」
192×192	`icon-192.png`	Android 主畫面
512×512	`icon-512.png`	PWA 安裝提示與啟動畫面

一般網站不必每種尺寸都做——一個 favicon.ico 加一張 180×180 的 Apple touch icon,就能覆蓋絕大多數訪客。

尺寸是 favicon 唯一不能弄錯的東西,所以下面是我們自己的PNG 轉 ICO從測試語料庫那個帶透明的標誌實際做出來的結果:

測試圖	輸入	輸出	變化
帶透明的標誌	28.8 KB	951 B	-97%

輸入是 28.8 KB,ICO 出來是 951 B(-97%)。ICO 是一個容器,裡面裝了好幾張點陣圖 —— 我們這個打包 16、32、48 px —— 但每一張都很小,所以整個檔案只是一張全解析度來源 PNG 的零頭。favicon 就是這麼一回事:它不是你的標誌的縮小副本,而是它的幾張小尺寸渲染,用一個請求送出去。

完整的標記

在頁面 <head> 裡把瀏覽器與手機指向正確的檔案:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" href="/icon-192.png" sizes="192x192">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

若要做 PWA,再把大尺寸圖示列進 manifest:

{
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

ICO 還是 PNG

主 favicon 用 .ico:單一檔案、多種尺寸,連舊瀏覽器都吃得下。
Apple touch icon 與 PWA 圖示用 PNG——這些規格要的是單一尺寸的 PNG,不是 .ico。

兩者都放才是常態,不是多此一舉。

替代方案值得量、不值得爭 —— 前提是你量對了東西。把同一個來源標誌轉成 JPG 是 16.3 KB(-43%)、轉成 WebP 是 7.5 KB(-74%),但這兩個都是全解析度的圖,而且都是上面那個 951 B ICO 的好幾倍 —— 那個 ICO 裡最大的一張才 48 px。到了 favicon 的尺寸,檔案大小就不重要了,接手的是另外兩個差別:JPG 完全沒有透明度,所以 JPG 的 favicon 在深色瀏覽器主題下會顯示一個白框;而 Safari 要到第 14 版才支援 WebP,所以只放 WebP 的設定在更舊的系統上會退回預設圖示。舊的那格用 ICO、現代那格用 PNG、JPG 永遠不要。

常見錯誤

「沒生效」其實是快取。 瀏覽器對 favicon 的快取非常頑固。先強制重新整理、開無痕視窗,或在網址加版本號(/favicon.ico?v=2),再判斷是不是真的失敗。
忘了放 Apple touch icon。 沒有它,iOS 會抓你頁面一張模糊的截圖當主畫面圖示。
來源圖太複雜。 細線與文字在 16px 下會消失。從方形、粗實的標記開始;需要的話先把圖裁成方形。

常見問題

現在還需要 favicon.ico 嗎?

需要。它是每個瀏覽器都會去要的可靠退路,也是唯一能把 16/32/48 一起裝進去的檔案。

為什麼新 favicon 沒出現?

幾乎都是快取,而不是你的標記寫錯。強制重新整理或加版本查詢字串,再看一次。

來源圖該多大?

從 256×256 以上、且為方形開始。產生器往下縮很乾淨;把小圖示往上放大永遠不會清晰。

#favicon#ico#web