Favicon 產生器
用一張 PNG / SVG 產生全套網站圖示:favicon.ico、16–512 像素 PNG、Apple Touch Icon、manifest 和 HTML 程式碼。
或將圖片拖曳到這裡
最大 30 MB圖片只在你的瀏覽器中處理,不會上傳- 1選擇圖片
選擇一張正方形圖片(建議 512 像素以上或 SVG)。
- 2設定
選擇圓角、背景色。
- 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 圖示就夠了,工具會一併產生。