前言

Favicon（網站圖示）是製作網站時不可或缺的一環。近年來，除了傳統的 favicon.ico 之外，還需要準備專為智慧型手機設計的 Apple Touch Icon 以及各種尺寸的 PNG，要準備的圖片種類越來越多。

只需一張圖片，在瀏覽器即刻產出全套 Favicon 的工具

如果手動將圖片一張張縮放並匯出，會耗費大量的時間。因此，我開發了一款工具，只需上傳一張圖片，就能一鍵生成所有必要的圖示組，並以 ZIP 格式打包下載。

https://devtoolkits.app/zh-tw/tools/favicon-generator

這是什麼樣的工具？

只要上傳解析度較大（建議 1024x1024 左右）的圖片（PNG/JPG/WebP），工具就會產出符合標準 Favicon 配置所需的所有檔案。

特色

  1. 📦 一鍵打包生成：同時產出 favicon.ico (內含 16x16, 32x32), apple-touch-icon.png (180x180), 以及各式解析度的 PNG (16x16, 32x32, 192x192, 512x512)。
  2. 🔒 瀏覽器端處理，安全可靠：所有的圖片處理皆使用 Canvas API 在您的瀏覽器內完成。圖片不會被上傳至伺服器，即使是公司 Logo 等敏感數據也能安心使用。
  3. ⚡ ZIP 下載：生成的圖片組會打包成一個 ZIP 檔案供您下載，能立即導入專案中使用。
  4. 🖼️ 維持透明度：若原圖是透明 PNG，匯出的各尺寸圖示也會維持透明背景。

使用方式

  1. 開啟 Favicon 生成 頁面。
  2. 將（建議接近正方形的）圖片拖曳放至區域內或選擇檔案。
  3. 在預覽畫面確認各尺寸的產出狀態。
  4. 點擊「Download All as ZIP」按鈕保存檔案組。

發布前的檢查重點

Favicon 以極小尺寸顯示，原圖看起來清晰，到了 16x16 卻可能模糊。若 Logo 含有細小文字或複雜線條，建議加上背景色、加寬留白，或只保留符號，再重新產生會更清楚。

導入後，請在瀏覽器分頁、書籤、手機「加入主畫面」中確認顯示效果。替換既有網站的圖示時，快取可能殘留，因此也請一併確認檔名、HTML 的參照位置，以及 manifest.webmanifest 中的圖示設定。

<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

結語

讓繁瑣的圖示製作工作在幾秒鐘內完成，將精力集中在更核心的開發與設計工作上吧！

常見問題

Favicon 該準備哪些尺寸？

最少準備 favicon.ico（內含 16x16、32x32）與 apple-touch-icon.png（180x180），即可對應主要瀏覽器與 iOS。若要涵蓋 PWA 與 Android 主畫面，還需準備 192x192、512x512 的 PNG 與 manifest.webmanifest。本工具會一次產出這些檔案。

原圖該用什麼格式與尺寸最理想？

建議使用接近正方形、約 1024x1024 的 PNG/JPG/WebP。若為透明 PNG，會維持透明度輸出各尺寸。由於細節在 16x16 會模糊，將細小文字或複雜線條簡化為符號、或加上留白，可提升辨識度。

換了 Favicon 卻沒有更新。

瀏覽器會強力快取 Favicon。更改檔名、確認 HTML 參照與 manifest.webmanifest 的圖示設定，並執行強制重新整理或清除快取，通常就能讓變更生效。