如何使用Favicon 產生器
- 輸入網站名稱（寫入 site.webmanifest），需要時選擇背景顏色與留白。
- 把 Logo 圖片拖放到虛線框內，建議使用 512×512 以上的正方形 PNG 或 SVG。
- 按「全部下載」取得所有檔案，放到網站根目錄。
- 複製下方的 HTML 標籤，貼到網頁的 <head> 內。
範例
產生的檔案與 HTML
logo.png（512×512，透明背景）favicon.ico、favicon-16x16.png、favicon-32x32.png、
apple-touch-icon.png、android-chrome-192x192.png、
android-chrome-512x512.png、site.webmanifest
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">網站需要哪些圖示
| favicon.ico | 瀏覽器分頁、書籤與 Google 搜尋結果顯示的網站圖示（Google 建議至少 48×48） |
|---|---|
| apple-touch-icon.png | iPhone、iPad「加入主畫面」時使用，180×180，iOS 會自動加圓角，透明區域會變黑，因此一律填滿背景色 |
| android-chrome-192 / 512 | Android 主畫面與 PWA 安裝圖示，透過 site.webmanifest 指定 |
規格與重點
| 輸出檔案 | favicon.ico（16/32/48）、16 / 32 PNG、Apple Touch Icon 180、Android 192 / 512、site.webmanifest |
|---|---|
| 輸入格式 | PNG、SVG、JPG、WebP（建議 512×512 以上正方形） |
| 非正方形圖片 | 置中縮放並保留透明邊 |
| 選項 | 背景顏色、留白 10%、網站名稱 |
| 附帶 | 可直接貼上的 <head> HTML 標籤 |
| 隱私 | 在瀏覽器內產生，圖片不會上傳 |
常見問題
改了 favicon，瀏覽器還是顯示舊的？
瀏覽器會長時間快取 favicon。可以在檔名或網址加上版本號（例如 /favicon.ico?v=2），或清除快取後重新開啟。
Google 搜尋結果會顯示我的 favicon 嗎？
會，前提是首頁有 <link rel="icon">、圖示至少 48×48 且 Googlebot 可以抓取。新設定的圖示可能需要幾天才會出現在搜尋結果。
為什麼 Apple Touch Icon 是填滿背景色的？
iOS 會把透明區域顯示成黑色，所以 180×180 的 Apple Touch Icon 一律以你選擇的背景色填滿。
可以用 SVG 當 favicon 嗎？
現代瀏覽器支援 SVG favicon，但 Safari 與部分舊瀏覽器不支援，建議同時提供本工具產生的 favicon.ico 與 PNG。