如何用 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" ...>。