什么是 ICO 和 favicon
打开任何网站，浏览器标签页上那个小图标就是 favicon。它通常是一个 .ico 文件，也会用到 PNG。favicon 是网站的"脸面"，用户在众多标签页里靠它快速识别你的网站。
为什么需要 ICO 格式
虽然现代浏览器支持 PNG 做 favicon，但 ICO 格式仍有不可替代的优势：
- 兼容性最好：老浏览器、Windows 桌面快捷方式只认 ICO
- 多尺寸打包：一个 ICO 文件可包含 16x16、32x32、48x48 等多种尺寸，系统自动选用
- 书签、PWA 图标：部分场景仍需要 ICO
DocsAll 图片转 ICO 工具
用 图片转 ICO 工具 快速生成：
- 准备一张正方形源图（建议 256x256 或更大 PNG）
- 打开 转 ICO 工具，上传源图
- 工具自动生成多尺寸 ICO
- 下载 .ico 文件
favicon 配置方法
基础配置
把 favicon.ico 放在网站根目录，浏览器会自动识别。也可在 HTML 的 head 中用 link 标签显式声明，rel 属性设为 icon，href 指向 favicon.ico。
多设备适配
现代网站建议同时配置多种尺寸：
- favicon.ico：默认，放根目录
- apple-touch-icon.png（180x180）：iOS 添加到主屏幕用
- icon.png（192x192、512x512）：PWA 用
源图设计建议
- 用 PNG：支持透明背景，ICO 由 PNG 转换而来效果更好
- 正方形：16x16、32x32 是显示尺寸，源图大一些便于缩放
- 简洁：小尺寸下复杂图案糊成一团，用简单图形和品牌色
- 透明背景：避免白底方块，融入浏览器标签
常见问题
favicon 不更新
浏览器缓存很顽固，改了 favicon 不显示，强制刷新（Ctrl+F5）或给路径加版本参数，如 favicon.ico?v=2。
图标显示模糊
源图太小或非正方形被拉伸。用 256x256 以上正方形 PNG 重新生成。
一个清晰的 favicon 让网站更显专业。用 ICO 工具几分钟就能搞定，别让标签页空着。