Favicon 產生器

用一張 PNG / SVG 產生全套網站圖示:favicon.ico、16–512 像素 PNG、Apple Touch Icon、manifest 和 HTML 程式碼。

或將圖片拖曳到這裡

最大 30 MB圖片只在你的瀏覽器中處理,不會上傳
  1. 1選擇圖片

    選擇一張正方形圖片(建議 512 像素以上或 SVG)。

  2. 2設定

    選擇圓角、背景色。

  3. 3下載

    下載 zip,把裡面的 HTML 片段貼到 head 裡。

「Favicon 產生器」使用指南

會產生哪些檔案

一個 zip,裡面有 favicon.ico(16、32、48 px 打在同一個檔案裡)、16/32/48/180/192/512 px 的 PNG、iOS 主畫面用的 apple-touch-icon.png、可安裝網頁應用程式用的 icon-192 和 icon-512、寫著你填的應用程式名稱的 site.webmanifest,以及裝著待貼上標籤的 head-snippet.html。

原圖怎麼準備

512 px 以上的正方形 PNG,或是一個 SVG,出來最乾淨。記得瀏覽器分頁上只有 16 px:帶文字的完整 logo 在那個尺寸會糊成一團,裁到只剩圖形部分,或乾脆用一個字母。圓角和背景的設定會同時套用到所有尺寸。

放到網站上

把 zip 裡的檔案放進網站的根目錄,再把 head-snippet.html 的內容貼進 <head>。瀏覽器對 favicon 的快取很久,驗證時請用無痕視窗或強制重新整理。

常見問題

我的照片會上傳到伺服器嗎?

不會。所有處理都在你的瀏覽器中完成,照片從未離開你的裝置。關掉分頁,什麼都不會留下。

需要哪些尺寸?

現代網站只需要 favicon.ico、一個 32px PNG、180px Apple Touch Icon,以及 192/512px 的 manifest 圖示就夠了,工具會一併產生。