如何用 SVG/PNG 生成多尺寸 favicon.ico

為什麼有用

爬蟲與舊版瀏覽器默認抓 favicon.ico；固定到任務欄的高分屏需要多分辨率圖層；靜態站點作者想把 Figma 導出儘快放進 public/。本地生成 ICO 保護未公開 glyph。

三類場景

獨立開發者

落地頁在各種環境都有圖標

從清晰 SVG 生成含多層尺寸的 ICO。

少 404

企業內網

兼容舊門戶策略

ICO 與 PNG 並存滿足不同策略。

IE 時代遺留更少坑

開源維護者

改版站點圖標

推送 docs 託管倉庫的根圖標。

單次提交搞定

操作步驟

打開 SVG 轉 ICO。

準備方形母版
非方圖先在裁剪處理。
上傳 SVG（或兼容柵格）
細描邊記得轉曲，避免字體缺失。
勾選嵌入尺寸
常見包含 16、32、48、256；按 Windows 磁貼指南補充 24/64。
檢查每層縮略預覽
16px 仍能辨認才算合格剪影。
下載 favicon.ico
根路徑放置並補充 <link rel="icon" ...>。

實用技巧

現代瀏覽器再加 PNG/WebP manifest 圖標。
改版後 favicon.ico?v=日期 輔助 CDN 刷新。
PNG 尺寸可用 SVG 轉 PNG 先行。

常見誤區

常見陷阱

細節過多

極小尺寸只適合粗筆畫 Logo。

常見陷阱

透明底在 Windows 異常

深色主題固定 shortcut 可能 flatten 異常——實測 pinned 圖標。

常見陷阱

CDN MIME

確保返回 image/x-icon 或規範等價類型。

不適合的場景

完整 PWA 資產包：需 maskable Android 圖標流水線。
動畫 favicon：兼容性與 CPU 成本都要單獨評估。
macOS icns：另有導出工具。

常見問題

會上傳品牌文件嗎？

本地生成；路徑數據不出站。

能用 PNG 開頭嗎？

可以；SVG 只是在縮放多層時更乾淨。

ICO 越大越好？

過多尺寸徒增體積——覆蓋桌面與開始菜單常見場景即可。

下一步

壓縮營銷 PNG。
調色對齊品牌色。
記錄靜態託管上線 checklist（含 robots）。

操作步驟

準備方形母版

非方圖先在裁剪處理。

上傳 SVG（或兼容柵格）

細描邊記得轉曲，避免字體缺失。

勾選嵌入尺寸

常見包含 16、32、48、256；按 Windows 磁貼指南補充 24/64。

檢查每層縮略預覽

16px 仍能辨認才算合格剪影。

下載 favicon.ico

根路徑放置並補充 <link rel="icon" ...>。