如何让Chrome优先选用16x16规格的favicon.ico而非SVG图标

实现代码 #

直接替换原有的favicon声明即可：

<link rel="icon" href="/favicon.ico" sizes="16x16" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" media="(min-resolution: 2dppx)" />

如果你的ICO文件包含多尺寸适配，可以把第一个标签的sizes属性调整为sizes="16x16 32x32"，覆盖更多普通屏的显示场景。

实现逻辑 #

• 普通DPR（设备像素比=1）的屏幕（比如默认100%缩放的Windows 10设备）不会命中min-resolution: 2dppx的媒体查询规则，只会加载16x16的ICO图标，刚好匹配Chrome标签栏的图标尺寸，不会出现模糊问题。
• 高DPR（设备像素比≥2）的屏幕（比如Mac视网膜屏、Windows高缩放屏、移动端屏幕）会命中媒体查询，加载SVG矢量图标，适配高分辨率显示需求。
• 不支持媒体查询的老旧浏览器会自动选用第一个声明的ICO图标，不会出现图标缺失问题。

旧方案失效原因 #

1. 未加限制的SVG图标会被Chrome优先判定为更优的可缩放资源，哪怕当前所需尺寸和ICO完全匹配，也会优先调用SVG。
2. 之前使用rel="alternate icon"声明SVG，会被部分浏览器判定为低优先级备选资源，甚至直接忽略，导致高分辨率屏也无法正常加载SVG图标。

注意事项 #

修改代码后一定要清空浏览器缓存再测试，Chrome的favicon缓存周期极长，普通刷新无法更新缓存，也可以直接用无痕模式访问验证效果。

内容的提问来源于stack exchange，提问作者ᴇʟᴇvᴀтᴇ