無需上傳, 100% 本機處理, 無需帳戶

Favicon 產生器

上傳你的標誌或圖示，下載所有標準 favicon 尺寸的 PNG。包含 Apple Touch Icon 和 PWA 圖示。不會有任何內容離開你的裝置。

Favicon 產生器 的運作方式

Favicon 生成器使用 Canvas drawImage API，將你提供的任何圖片調整為標準 favicon 尺寸：16x16、32x32、48x48、180x180（Apple 觸控圖示）、192x192（Android Chrome）和 512x512（PWA manifest）。所有六種尺寸都在你的瀏覽器中生成並以個別 PNG 檔案下載，另外還會產生一個將 16x16、32x32 和 48x48 三個尺寸合併為單一舊版檔案的多尺寸 favicon.ico。你的來源圖片絕不離開你的裝置。

完整的 favicon 組合涵蓋瀏覽器分頁圖示、書籤、主畫面捷徑和 PWA 啟動畫面的全部範圍。使用高解析度來源圖片（至少 512x512 像素）可為縮小演算法提供最多的細節。你在頁面 head 元素中引用每個生成檔案所需的 HTML link 標籤，會顯示在一個可直接複製的片段中。

作者 Bastien Sulyan

Favicon 產生器 的分步使用說明

  1. 將來源圖片拖曳到上傳區。使用 512 像素或更大的正方形圖片以獲得最佳效果。
  2. 在結果面板中預覽六種生成的尺寸。
  3. 從結果面板中下載六個 PNG 檔案和 favicon.ico。
  4. 複製顯示所有尺寸 link 標籤的 HTML 片段。
  5. 將 PNG 檔案放置在你的網站根目錄，並將 link 標籤貼入頁面的 head 元素中。

常見使用情境

  • 開發者建立新網站，需要從品牌標誌生成所有 favicon 尺寸，且不想訂閱設計工具。
  • PWA 開發者生成 Web 應用程式 manifest 中主畫面安裝所需的 192x192 和 512x512 圖示。
  • 部落客更新網站識別，以從其標誌建立的自訂圖示替換預設的 favicon。
  • 自由工作者為客戶專案快速生成完整的 favicon 組合，無需等待安裝離線設計軟體。

常見問題

我可以使用哪些圖片格式作為來源？

瀏覽器可以解碼的任何格式都可以作為輸入：JPEG、PNG、WebP、GIF 和 SVG。對於 SVG 來源，瀏覽器會在調整大小前將向量點陣化到 Canvas 上，因此輸出的 PNG 是點陣圖片。

為什麼我的 favicon 在瀏覽器分頁中看起來很模糊？

16x16 和 32x32 尺寸非常小。如果來源圖片包含細微的細節或細線，它們在縮小後就會消失。清晰、粗獷的設計和明確的形狀在小尺寸下效果遠優於複雜的插圖。

工具會生成 ICO 檔案嗎？

會。除了六個 PNG 檔案外，工具還會將 16x16、32x32 和 48x48 三種尺寸合併成一個 favicon.ico 檔案，這是較舊版 Windows 瀏覽器和部分爬蟲仍會在網站根目錄尋找的格式。現代瀏覽器使用 PNG 連結即可正常運作，因此同時發佈兩者沒有額外成本，並讓每個用戶端自行選擇。

來源圖片是在伺服器上處理的嗎？

不是。產生每種尺寸的 Canvas drawImage 呼叫在你的瀏覽器分頁中執行。來源圖片從你的本機磁碟讀取，六個 PNG 輸出在記憶體中建立，並以下載方式提供。沒有檔案資料通過伺服器。

Apple 觸控圖示應該使用哪個尺寸？

iOS 和 iPadOS 使用以 apple-touch-icon link 標籤引用的 180x180 像素 PNG。當使用者在 Apple 裝置上將你的網站加入主畫面時，就會使用這個尺寸。工具會在其他尺寸的同時生成這個檔案。

我可以使用矩形圖片作為來源嗎？

可以，但輸出會以信箱格或柱狀格的方式填充正方形畫布。為了獲得最佳結果，請從正方形開始，或在使用工具前先將來源圖片裁切為正方形。