Favicon 站點圖示生成器
拖入 logo，看清每個真實尺寸，然後帶走 favicon.ico、PNG 套裝與 HTML 程式碼。
PNG / JPEG / WebP / GIF / SVG——也可以直接拖到這張卡片上
最多畫 2 個字元；方塊字與 emoji 只畫 1 個。
放入一張圖片（或切到「文字」），所有尺寸會立刻出現在這裡——沒有「生成」按鈕。favicon.ico 16/32/48 · PNG 16 · 32 · 48 · 180 · 192 · 512 · site.webmanifest · HTML
怎麼用
- 選擇一張圖片（或直接拖到卡片上），所有尺寸立刻出現——沒有「生成」按鈕，看到的就是將要下載的。
- 還沒有 logo？切到「文字 / Emoji」輸入一兩個字元：取色器設背景色，文字色會按對比度自動在黑/白裡挑一個。
- 下載資源包解壓縮到站點根目錄，把複製到的 <link> 程式碼貼進 <head>，重新整理站點——標籤頁圖示就出現了。
示例
輸入
logo.png · 512×512，形狀「圓角」
資源包（9 個檔案）
favicon.ico（16/32/48） favicon-16x16.png favicon-32x32.png favicon-48x48.png apple-touch-icon.png（180） android-chrome-192x192.png android-chrome-512x512.png site.webmanifest snippet.html
同一個源圖 + 同一組選項，匯出的 PNG 與 ZIP 是逐位元組相同的（壓縮檔時間戳記固定為 1980-01-01），可以直接提交進倉庫做比對。換形狀只改四角裁切，不重畫內容。
範疇、侷限與常見問題
- 不匯出 SVG：16px 下能看清的 SVG 需要手工簡化路徑；把點陣圖包成 SVG、或用系統字型的文本冒充向量，都只是「看起來像向量」。想要 SVG 就保留你自己的 .svg，和這套 PNG 一起放進站點。
- 圖片只做等比適配、不裁切：非正方形的 logo 會留下透明邊，需要構圖請先用圖片工具處理（站內的圖片尺寸調整 / 格式轉換）。
- 透明圖示由平臺自己補底：iOS 會在 apple-touch-icon 後面加一層背景，部分 Android 啟動器也會。想要可控的底色，請用「文字 / Emoji」，或先把底色加進源圖。
- site.webmanifest 只寫圖示，不寫 name / short_name：站點名工具不知道，不替你猜。解壓縮後自己補兩行即可（name 是可選欄位，預設時瀏覽器用頁面標題）。
- favicon.ico 內含 16 / 32 / 48（不含 64 / 128）：覆蓋現代瀏覽器與 Windows；需要更多檔位請用 PNG。
- 動圖 GIF / WebP 只取第一幀——favicon 本身也不支援動畫。
- 字元圖示用的是你裝置的系統字型：macOS、Windows、Linux、手機上字形不同，匯出的 PNG 固定為當前裝置的樣子。這也是本工具不做字型選擇的原因。
- 不抓取網址、不做線上檢測：本工具不接受網址，也無法檢查你部署後的 favicon 是否生效。部署完開啟自己的站點看標籤頁即可。
- 單檔案上限 20 MB、單邊 8000 px；源圖小於 180 px 時，大尺寸圖示是放大得到的，可能偏糊。
- 不裁剪、不摳圖、不批次、不儲存歷史：重新整理即回空態（不落儲存、不進 URL）。
相關工具
圖示做好之後，大家通常接著要用的工具。