Favicon ICO 生成

怎么用

1. 选择一个 PNG 或 SVG 源文件。正方形源图效果最好，其他形状会居中裁剪。
2. 点生成 favicon.ico，三个尺寸会以预览图形式出现，下方标着各自尺寸。
3. 下载 favicon.ico，放到站点根目录或你的构建期望的位置。
4. 下载 apple-touch-icon.png（180x180），用于 iOS 主屏图标。
5. 复制 HTML 片段，里面写清了文档头部与清单里该声明的尺寸。

常见用法

• 一个文件应付所有浏览器 —— 即使你已经提供 PNG 图标，多数浏览器仍会去站点根目录要 favicon.ico。
• 补上 /favicon.ico 兜底 —— 不管你有没有声明，浏览器都会请求它，给个真文件能省掉日志里的 404。
• 添加 Apple 触控图标 —— iOS 用的是自己的 180x180 PNG，不是 ICO。
• 记录图标清单 —— 片段里写明了清单还缺哪些尺寸要补。
• 换 logo 后重新生成 —— 一个源文件一键重建全部尺寸。

常见问题

问：它和输出 PNG 尺寸的 favicon 生成器有什么不同？ 答：那个工具导出逐个尺寸的 PNG 文件；这个把 16x16、32x32、48x48 打包进单个 .ico 容器 —— 也就是浏览器在 /favicon.ico 期望的格式，并额外给出 180x180 的 Apple 触控图标 PNG。清单引用的 PNG 集合请用它。

问：能把 256x256 这样的大尺寸也放进 ICO 吗？ 答：本工具停在 16、32、48，因为这三个尺寸已覆盖 favicon 的显示场景。ICO 格式把 256 存成 0 值字节，而且这么大的图标通常用 PNG 源更合适。

问：为什么用 PNG 条目而不是 BMP 条目？ 答：PNG 条目保留 alpha 通道，文件也小得多，而且现在所有浏览器都能读 ICO 内的 PNG 条目。BMP 条目还要额外写 AND 掩码，体积会大好几倍。

问：我改了 SVG，ICO 没变化，为什么？ 答：文件选择框只在重新选文件时才重跑。ICO 是源文件在生成那一刻的快照，所以请把更新后的文件再选一次。