Favicon 產生器
不要把預設分頁圖示帶上線。上傳一張圖，匯出瀏覽器、iOS、Android 和 PWA 需要的 favicon 套件。
上傳圖片
支援 PNG、JPG 和 SVG。512x512 或更大的來源圖最理想。
即時預覽
HTML snippet
<!-- Add inside <head> --> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Favicon 最佳實務
為什麼需要多種尺寸
瀏覽器、書籤、釘選分頁、安裝提示和手機捷徑會要求不同尺寸。完整組合能保持圖示清晰，不讓平台把小檔硬放大。
PNG vs ICO
現代瀏覽器能很好處理 PNG icon。ICO 仍有 legacy compatibility 價值，而 PNG 通常有更乾淨的透明度和較簡單的資源處理。
為小尺寸設計
Favicon 常以 16x16 顯示。簡單形狀、強對比和較少細節，通常比把完整 logo 擠進分頁更耐看。
平台 icon 指南
桌面瀏覽器
用於分頁、書籤和瀏覽器歷史清單。
iOS / iPhone
網站加入主畫面時使用。不透明圖稿通常效果較好。
Android Chrome
搭配 web manifest 用於安裝提示、splash screen 和工作切換器。
快速安裝指南
下載並解壓縮
使用下載按鈕匯出 zip 檔，裡面包含 PNG assets、manifest files 和 head snippet。
上傳到 public root
把解壓縮後的檔案放在公開可存取的位置，例如網站的 public directory。
加入 head markup
把產生的 head snippet 複製到 document head，並清除瀏覽器快取以確認新圖示。
常見問題
zip 檔裡包含什麼？
zip 包含常見瀏覽器 favicon PNG、Apple touch icons、Android icon 尺寸和 site.webmanifest 檔案。
site.webmanifest 是什麼？
它是 JSON manifest，告訴瀏覽器網站被安裝到主畫面或像 app 一樣啟動時應如何呈現。
這些 icon 要怎麼使用？
把產生的檔案上傳到 public root，並在需要顯示 favicon 的頁面加入產生的 head markup。
為什麼舊 favicon 還在？
瀏覽器會積極快取 favicon。請試試強制重新整理、清除網站資料、改圖示網址，或用新的瀏覽器個人檔案測試。
Favicon 必須和 app icon 一模一樣嗎？
應該看起來相關，但不必完全相同。很多品牌會在 favicon 尺寸使用簡化標誌，在 installed app icon 使用更完整圖示。