favicon 多尺寸规范与「改了不生效」等常见问题排查
上一篇讲了 favicon 的基本做法，这篇深入讲多尺寸规范和几个「改了不生效」的排查，都是实际踩过的坑。
一、favicon 的尺寸矩阵**
一个完整的 favicon 方案要覆盖：
- 16×16 / 32×32：浏览器标签页；
- 48×48：Windows 桌面快捷方式；
- 180×180：苹果 apple-touch-icon；
- 192×192：Android Chrome。
只放一个 16×16，高分屏和移动端必然糊。
二、引用规范
1.
2. .ico兜底兼容（老 IE 只认它）；apple-touch-icon必须是 PNG、180×180；- 多个尺寸用
sizes区分。
三、常见报错与排查
- 改了图标不生效：
- 浏览器缓存顽固，用无痕窗口验证；
- 给 href 加版本号
/favicon.ico?v=2； - 确认文件真的覆盖到了服务器对应路径。
- 图标模糊：
- 源图分辨率不够，换 512×512 以上；
- 只放了 16×16，补上 32×32、180×180。
- 手机主屏图标不对：
apple-touch-icon要 PNG、尺寸 180×180；- 路径和
<head>位置要正确。
- 老浏览器不显示：
- 少了
.ico，补上即可。
- 404 请求 favicon：
- 站点没放 favicon 文件，浏览器会自动请求
/favicon.ico，放一个进去消掉 404。
四、工具生成多尺寸
手动缩放 + 打包 .ico 麻烦，用星点 favicon 生成器：上传 512×512 源图 → 一键出 .ico（多尺寸）+ 各档 PNG + 引用代码，本地处理。源图用矢量或高分辨率 PNG。
五、落地清单
- 512×512 源图；
- 生成 .ico + 多尺寸 PNG；
- 放根目录；
<head>加引用；- 无痕验证 + 版本号防缓存。
总结：favicon 的坑主要在「尺寸不全」和「缓存」，按上面排查基本都能解决。
星点 favicon 生成：xingdian.net/app/image/favicon
浙公网安备 33010602011771号