rel="icon"必须置于所有图标标签最前，因其异步加载且不阻塞解析；rel="apple-touch-icon"需明确sizes并靠后放置，避免资源竞争拖慢首帧favicon；禁用rel="shortcut icon"，多rel="icon"仅首项生效，内联svg适用于首屏关键小图标。
HTML里加多个图标，不是“越多越全”，而是谁先加载、谁被浏览器忽略、谁拖慢首屏——link rel="icon"和link rel="apple-touch-icon"根本不在同一渲染路径上，混着写反而让关键图标延迟。
为什么和不能互换位置
浏览器对不同rel值的图标处理逻辑完全不同：link rel="icon"是异步加载、不阻塞解析、不参与渲染树构建；而link rel="apple-touch-icon"虽也不阻塞，但 Safari 会把它当“潜在主屏图标”提前发起请求，若放在rel="icon"之后，可能因资源竞争导致首帧 favicon 加载变慢。
-
rel="icon"必须放在所有其他图标link之前，且建议只保留一个href指向 32×32 或 16×16 的 PNG（体积小、兼容稳） -
rel="apple-touch-icon"应明确指定sizes，如sizes="180x180"，避免 Safari 自动缩放产生模糊或额外请求 - 不要用
rel="shortcut icon"——这是 IE 时代遗留，现代浏览器已忽略，还可能触发冗余请求 - 多个
rel="icon"标签（比如同时写 PNG 和 SVG）会让浏览器按顺序尝试，但只采用第一个成功加载的，后面全浪费带宽
内联 SVG 图标 vs 外链 SVG 图标：什么时候该 inline
内联 SVG 参与 DOM 构建，没有网络请求开销，但体积大了会拖慢 HTML 解析；外链 SVG 可缓存、可压缩，但多一次 HTTP 请求——关键看它是不是首屏关键图标（比如导航栏 logo、按钮图标）。
- 首屏内不超过 3 个、总 SVG 代码 内联，别打包进 JS 或 CSS
- 复用频繁的图标（如菜单、关闭、分享），用
<symbol></symbol>定义在<defs></defs>里，再用<use href="#id"></use>引用，避免重复 DOM - 外链 SVG 必须配
type="image/svg+xml"，否则某些旧版 Edge 不识别 MIME 类型，降级失败 - 禁止把 SVG 当背景图用
background-image: url(...)——它不支持loading="lazy"，也不参与浏览器图标预加载逻辑
manifest.json 中的 icons 字段对页面渲染零影响
manifest.json里的icons数组只供 PWA 安装时使用，浏览器解析 HTML 阶段完全不读它，也不会提前下载这些图标。它和link标签毫无关系，别指望靠它“补救”漏掉的 favicon。
- 即使
manifest.json里写了 512×512 的 PNG，link rel="icon"没写，桌面浏览器仍显示默认图标 - PWA 安装流程中，系统会单独 fetch
manifest.json，再根据其中icons字段下载对应尺寸，这个过程发生在页面加载完成之后 - 不要把
manifest.json图标尺寸设得过大（如 1024×1024）——安装时下载慢，但对网页首屏毫无帮助 - Android Chrome 会优先读取
link rel="icon" sizes="192x192"而非 manifest，除非你明确禁用了display: standalone
真正卡首屏的从来不是图标本身，而是你让它在错误时机、以错误方式、走错误路径被加载——link rel="icon"放错位置、SVG 内联过量、误信 manifest 能兜底，这三件事加起来比少加一个图标更伤性能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
