Favicon 網站圖示產生器
用一張圖片產生所有尺寸的 favicon。
將標誌拖放到這裡或點擊選擇
PNG、SVG、JPG、WebP 或 ICO。 512 × 512 px 以上的正方形標誌效果最好。 檔案只在瀏覽器中處理，不會上傳。 圖片會保留在這個瀏覽器中，直到移除為止。
Ctrl+O選擇Ctrl+V貼上
Favicon 是瀏覽器在分頁和書籤中顯示的小圖示；有人把你的網站加到主畫面時，手機會改用較大的版本。放入一個標誌，這個產生器就會做出網站需要的所有檔案——favicon.ico、PNG favicon、Apple 觸控圖示、Android 圖示與網頁資訊清單（web manifest）——並提供即時預覽，以及可貼到網頁中的 HTML。全部在瀏覽器中執行，你的標誌不會離開你的裝置；免費，也不需要註冊。
如何製作 favicon
- 將標誌（PNG、SVG、JPG 或 WebP）拖放到頁面任何位置、用 Ctrl+V 貼上，或點擊選擇檔案。在其他圖片工具加入的圖片已經在清單中，保持你在那裡留下的樣子：點擊它的縮圖即可使用。沒有檔案也可以先用範例標誌試試。
- 工具會自動框選標誌：寬版標誌取其圖形標記，其他標誌則去除空白邊緣。拖曳標誌上的方框可改變範圍，或選擇「整個標誌」。接著選擇背景（最前面是標誌本身的顏色）、留白與形狀，預覽會即時更新。
- 點擊「全部下載（ZIP）」，把檔案放到網站的根目錄，再點擊「複製 HTML」，把標籤貼到網頁的 <head> 中。
功能
- 含 16、32、48 px 圖示的 favicon.ico，以及 16 與 32 px 的 PNG favicon
- apple-touch-icon.png（180 px）與 Android Chrome 圖示（192 與 512 px）
- 包含 App 名稱與主題色的 site.webmanifest，以及放進 <head> 的 HTML 標籤
- 自動找出寬版標誌的圖形標記；拖曳方框可改用其他部分，或放入整個標誌
- 背景：透明、標誌本身的顏色或任意顏色；留白 0～30%；正方形、圓角或圓形
- 即時預覽每種尺寸、瀏覽器分頁與主畫面，淺色與深色模式皆可檢視
- 可從 PNG、SVG、JPG、WebP 或 ICO 開始製作；所有檔案打包成一個 ZIP
隱私安全嗎？
是的。圖示由瀏覽器中的 WebAssembly 影像引擎製作；你的標誌與產生的檔案都不會離開你的裝置。標誌會一直保留在這個瀏覽器中，直到從清單中移除。
常見問題
需要哪些 favicon 尺寸？
四個檔案幾乎就能涵蓋所有情況：含 16、32、48 px 的 favicon.ico，用於瀏覽器分頁、書籤與 Windows 捷徑；180 px 的 apple-touch-icon.png，用於 iPhone 與 iPad 主畫面；以及列在 site.webmanifest 中的 192 與 512 px PNG，用於 Android 與可安裝的網頁應用程式。ZIP 裡全部都有，另外還有給偏好 PNG 的瀏覽器使用的 16 與 32 px PNG。
如何把 favicon 加到 HTML 中？
把檔案放到網站的根目錄，讓 /favicon.ico 可以開啟，再點擊「複製 HTML」，把標籤貼到每個頁面的 <head> 中。即使沒有任何標籤，瀏覽器也會尋找 /favicon.ico；加上標籤則能提供 PNG 尺寸、Apple 圖示與資訊清單。
為什麼 apple-touch-icon.png 有背景？
因為 iPhone 與 iPad 會把透明像素顯示成黑色，並自行把邊角修成圓角，所以 Apple 圖示一律是完整、不透明的正方形：使用你選的背景色，背景透明時則為白色。其他圖示會保留透明度與形狀。
可以使用 SVG 標誌嗎？
可以。瀏覽器會以 SVG 本身的尺寸繪製（小於 1024 px 時以 1024 px 繪製），所有圖示都以此為基礎製作。連結其他檔案（圖片、字型或樣式表）的 SVG 無法完整繪製成圖片，因此工具會提示你，而不是做出不完整的圖示；請先匯出為 PNG，或把其中的圖片內嵌進去。
我已經換了 favicon，瀏覽器卻還是顯示舊的，為什麼？
因為瀏覽器會把 favicon 快取很長一段時間。按 Ctrl+F5（Mac 為 Cmd+Shift+R）重新載入頁面，或以無痕視窗開啟網站，就能看到新圖示。