link 标签没有 icon 属性，起作用的是 rel="icon"等值；需按场景声明多格式 favicon，注意 type 和 sizes 的适用条件及浏览器兼容性。
link 中的 icon 属性到底要不要写？
不写 icon 属性——它根本不存在。HTML 标准里没有 icon 这个 <link> 属性，浏览器会直接忽略。你看到的“icon”大概率是误把 rel 值当成属性名了。
真正起作用的是 rel 值为 "icon"、"shortcut icon" 或 "apple-touch-icon" 的 <link> 标签，配合 href 和可选的 type、sizes。
favicon 多格式声明怎么写才不白费力气？
现代 favicon 需覆盖桌面浏览器、移动端 Safari、PWA 安装图标等场景，靠单个 .ico 文件已不够用。关键不是“多写几个”，而是按需声明、避免冲突：
-
<link rel="icon" href="/favicon.ico">—— 必须保留，兼容所有旧浏览器（IE 除外），且必须是.ico格式；sizes属性对.ico无效，别加 -
<link rel="icon" type="image/svg+xml" href="/favicon.svg">—— Chrome 110+、Firefox 113+ 支持，优先级高于.ico；但 Safari 目前不支持 SVG favicon，别指望它在 iOS 上生效 -
<link rel="apple-touch-icon" href="/apple-touch-icon.png">—— 专供 iOS/iPadOS 添加到主屏幕，推荐提供180×180尺寸，sizes可写可不写（Safari 会自动缩放） -
<link rel="manifest" href="/site.webmanifest">—— PWA 图标来源，webmanifest文件里定义不同尺寸的png，比 HTML 里堆<link>更可控
注意：rel="icon" 出现多次时，浏览器按顺序取第一个**有效且支持的**；不要把 SVG 放在 .ico 前面又指望老浏览器正常显示。
type 和 sizes 属性哪些情况必须写？
type 只对非 .ico 文件有意义：type="image/png" 或 type="image/svg+xml" 能帮浏览器跳过 MIME 类型探测，减少请求失败概率；.ico 文件永远用 type="image/x-icon"（即使省略，浏览器也默认按此处理）。
sizes 仅在 rel="icon" 且文件是 PNG/SVG 时才生效，格式如 sizes="32x32" 或 sizes="any"（SVG 推荐写 sizes="any"）；对 .ico 加 sizes 是无效的，Chrome 会警告 “The 'sizes' attribute is only supported for link rel='icon'”，但更关键的是它压根不解析这个值。
常见错误：<link rel="icon" href="/favicon.png" sizes="32x32"> 没写 type，部分浏览器可能因无法识别类型而丢弃该标签。
为什么加了所有格式，地址栏还是显示默认图标？
最常被忽略的三个点：
- 路径写错或服务器没配 MIME 类型：检查
/favicon.ico是否能直接在浏览器地址栏访问；.svg文件要返回image/svg+xml，.png要返回image/png，否则 Chrome 会静默忽略 - 缓存太硬：favicon 缓存策略极强，改完后清空浏览器缓存 + 强制刷新（
Ctrl+Shift+R），或临时用带时间戳的路径测试，如/favicon.svg?v=2 - HTTPS 环境下混入 HTTP 资源：哪怕只有一处
href是http://，现代浏览器会直接屏蔽整个图标加载
调试建议：打开 DevTools → Application → Manifest，看 “Favicon” 区域是否列出预期图标；没列出来，说明至少有一个声明被浏览器判定为无效或不可访问。
