← 所有文章

如何用一張圖片製作 Favicon（ICO + PNG，全尺寸一次生成）

2026-07-27

懶人包： 想用一張圖片製作 favicon，打開 ToolKoala 的 Favicon 生成器，丟進一張正方形圖片，然後下載。你會拿到一個 favicon.ico（內含 16、32、48px）加上獨立的 PNG 檔，尺寸涵蓋 16、32、48、180、192、512px，還有一段可以直接貼上的 HTML <link> 標籤。完全免費，而且全程都在你的瀏覽器裡完成——圖片不會被上傳。我做這個工具的那一週，正好是我受夠了那些要你註冊才能下載一個 16 像素小圖示的 favicon 網站的時候。

為什麼你需要不只一種尺寸的 favicon

以前 favicon 就是一個 16×16 的 .ico 檔，做完就結束了。現在不一樣了。不同地方會用不同尺寸顯示你的圖示：

  • 16 / 32 / 48px — 經典的瀏覽器分頁跟書籤圖示，都放在 favicon.ico 裡。
  • 180px — Apple Touch Icon，當有人把你的網站加到 iPhone 主畫面時使用。
  • 192 / 512px — Android 跟 PWA 圖示，用在加到主畫面跟多工切換畫面。

只提供一個 16px 圖示，你的網站在分頁上是清晰的，但一旦有人把它存到手機主畫面，馬上就會變模糊。這個工具從一張來源圖片就能生成完整的一整套尺寸，你完全不用煩惱這件事。

如何製作你的 Favicon

  1. 打開 ToolKoala 的 Favicon 生成器，把圖片拖進去。
  2. 它會立刻渲染出每個尺寸的預覽——從 16 到 512——讓你看清楚圖示縮到很小的時候長什麼樣子。
  3. 下載你需要的檔案：
    • favicon.ico — 多解析度圖示（16 + 32 + 48），給瀏覽器分頁用。
    • 所有 PNG — 一鍵抓齊每個尺寸的獨立 PNG 檔。
    • 或是點任何一個單一預覽圖，只下載那個尺寸。
  4. 複製它給你的 HTML 程式碼片段，貼到你網頁的 <head> 裡。

這段程式碼已經幫你填好正確的 rel、type 跟 sizes 屬性：

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">

把檔案放進你的網站根目錄（或是 href 指向的位置），貼上這段標籤，就完成了。

讓圖示在 16 像素下依然清楚可辨的小技巧

  • 從正方形、簡單的圖形開始。 在 16×16 的尺寸下，只夠容納一個大膽的形狀或一個字母——放不下你完整、帶標語的 Logo。如果你的 Logo 很細緻，就專門為這個用途做一個精簡版的「圖示標記」。
  • 餵給它夠大的來源圖。 至少上傳 512px 的圖，這樣大尺寸的 PWA 圖示才會保持清晰；這個工具只能縮小，沒辦法無中生有補出細節。
  • 高對比度會贏。 這個圖示會出現在你控制不了的瀏覽器介面跟手機桌布上，強烈的對比度能讓它在任何地方都清楚可見。
  • 檢查那些超小的預覽圖。 這個工具會像素級精準地顯示 16 跟 32px 的版本——如果那個尺寸看起來一團糊，出貨前先把圖案簡化。

老實說的限制

這個工具會把你的圖片畫進正方形畫布裡，所以非正方形的來源圖會被壓扁變形——先用裁切工具裁成正方形，效果才會乾淨。它也不會幫你加圓角或留白——你上傳什麼，它就照原樣縮放。而且它生成的是現代標準的那一套——如果你需要每一種舊版 Microsoft 磚狀圖示跟 Safari 釘選分頁 SVG 這種老古董，會需要更重量級的生成器來涵蓋這些邊角案例。但對 99% 的網站來說，這裡的 ICO + PNG 套組正是瀏覽器實際會用到的東西。

常見問題

要怎麼用一張圖片做出 favicon？ 打開像 ToolKoala Favicon 生成器這樣的瀏覽器工具，丟進一張正方形圖片，下載 favicon.ico 跟每個尺寸的 PNG。接著把提供的 HTML 標籤貼到你網頁的 <head> 裡。

會拿到哪些尺寸跟格式？ 一個包含 16、32、48px 的 favicon.ico，加上獨立的 PNG 檔，尺寸有 16、32、48、180（Apple Touch）、192 跟 512px（Android/PWA）。

還需要 .ico 檔嗎，還是只要 PNG 就夠？ 兩個都需要。favicon.ico 在瀏覽器分頁上的相容性最廣，而較大尺寸的 PNG 則涵蓋了 Apple Touch 跟 Android/PWA 主畫面圖示。這個工具兩種都給你，讓你各方面都能顧到。

我的圖片會被上傳嗎？ 不會。Favicon 是用瀏覽器裡的 canvas 生成的——你的圖片不會離開你的裝置。

我的來源圖片不是正方形，做出來還會正常嗎？ 非正方形的圖片會被拉伸壓成正方形。建議先裁成 1:1 的比例，做出來的圖示才會乾淨好看。

— Milo 🐨