favicon图标生成

favicon图标生成的使用场景

• 新站上线，浏览器标签页还是默认的空白图标，想尽快补一个
• 有一张方形 Logo，但不知道 favicon 该导出多大、该用 ICO 还是 PNG
• 换了图标后浏览器仍显示旧图标，想确认文件本身有没有问题

favicon图标生成怎么用

1. 上传图片：点击选择、拖入，或截图后直接粘贴
2. 在预览图上拖拽框选要保留的方形区域，双击可恢复整图，右下角手柄可缩放选区
3. 勾选输出尺寸——做网站图标建议至少保留 16、32、48 三个
4. 生成并下载 favicon.ico，把它放到网站根目录，再刷新页面查看效果

常见问题

favicon 需要做几个尺寸？

一个 .ico 里放 16×16、32×32、48×48 三个就够覆盖绝大多数场景：浏览器标签页用 16，书签与任务栏用 32，桌面快捷方式用 48。如果再补 180×180，还能同时作为 iOS 添加到主屏的图标。

为什么一定要 ICO 格式，PNG 不行吗？

现代浏览器其实也认 PNG，但 ICO 的优势是一个文件里能装多个尺寸，浏览器按场景自己挑合适的那张；只给一张 PNG，缩放到 16px 时通常比专门渲染的 16px 更糊。想兼容最广，用 ICO。

favicon.ico 必须放在网站根目录吗？

不一定，但放根目录是最省事的做法——浏览器在页面没有声明图标时会自动去请求 /favicon.ico。更稳妥的方式是在 head 里显式声明：<link rel="icon" href="/favicon.ico" sizes="any">。

换了图标浏览器还是显示旧的怎么办？

这是缓存问题，不是文件问题。强制刷新（Ctrl/⌘ + Shift + R）、换一个无痕窗口，或者给引用加版本号如 /favicon.ico?v=2。CDN 也需要刷新对应缓存。

可以上传带透明背景的 PNG 吗？

可以。导出的 PNG 与 ICO 都会保留透明通道；但要注意深色模式下透明区域会露出浏览器底色，如果 Logo 是深色的，建议加一个浅色圆形或方形底衬。

图片会被上传吗？

不会。裁切与缩放全部由浏览器 Canvas 完成，图片不离开你的设备。