rel="stylesheet"必须严格小写、带引号、无拼错，否则静默失效致白屏；rel="icon"唯一合法，须配type及（png/svg）精确sizes，sizes属性在link中被浏览器忽略，多端适配依赖真实文件尺寸、manifest.json及apple-touch-icon。
rel="stylesheet" 必须小写、带引号、不拼错
浏览器只认 rel="stylesheet" 这个精确值，漏引号、大小写混用、多空格或拼成 styleSheet 都会静默失效——页面白屏但控制台不报错。
常见错误：rel=stylesheet（缺引号）、rel=" stylesheet "（首尾空格）、rel="StyleSheet"（大小写错）。
type 属性在 HTML5 中已冗余，加了不报错但没必要；若服务端没返回 Content-Type: text/css，临时加 type="text/css" 可能触发 fallback，但不应作为长期方案。
rel="icon" 不是 "shortcut icon"，也不能写成 "favicon"
rel="shortcut icon" 是已被标准废弃的写法，Chrome 90+、Firefox 84+、Edge 90+、Safari 15+ 全部忽略它。混写两行（比如同时有 rel="shortcut icon" 和 rel="icon"）反而可能触发重复请求，干扰 PWA 解析。
唯一合法值是 rel="icon"，且必须配 type 和（对 PNG/SVG）严格的 sizes：
• type="image/x-icon" → 只能指向 .ico 文件，sizes 对它无效（.ico 自带尺寸）
• type="image/png" → 必须带 sizes="32x32"，x 必须是英文小写，不能是 32×32（中文乘号）或 32px
• type="image/svg+xml" → Chrome 110+ 要求必须声明，否则拒载；Safari 当前（2026 年中）仍不支持 SVG 作为 rel="icon"
多端图标适配不能只靠 sizes 属性
sizes 属性在 <link rel="icon"> 中几乎不被任何主流浏览器实际解析——你写 sizes="192x192"，浏览器不会据此选图，也不会报错，只是安静忽略。
真正起作用的是：
• href 指向的文件真实像素尺寸（如 PWA 要求 192×192 和 512×512 的 PNG）
• 多个 <link rel="icon"> 并列时，浏览器取第一个合法且可加载的（后面即使尺寸更优也跳过）
• iOS 必须单独声明 <link rel="apple-touch-icon" href="/apple-touch-icon.png">，它不看 sizes，只认这个 rel 值
• 现代 PWA 场景下，sizes 的唯一有效位置是在 manifest.json 的 icons 数组里，例如：{"src":"icon-192.png","sizes":"192x192","type":"image/png"}
link 标签必须放在 head 里，且顺序影响样式和图标
<link> 放在 内会导致 FOUC（样式闪现）、延迟加载，旧版 IE 直接忽略；SSR 或 Next.js 类框架中还会引发 hydration 不一致报错。
多个 <link rel="stylesheet"> 按书写顺序加载，后加载的 CSS 规则会覆盖前面同选择器的规则——重置样式应放最前，主题样式放最后。
多个 <link rel="icon"> 并存时，浏览器只取第一个合法且可加载的，所以兜底的 .ico 应放最前，高分辨率 PNG 放后面提高命中率，但别指望浏览器“智能选最优”。
Content-Type 和缓存策略：favicon.ico 必须返回 Content-Type: image/x-icon，PNG 图标必须返回 Content-Type: image/png；而顽固的旧缓存（尤其 CDN 或浏览器强缓存）会让新图标长期不生效，得配合版本号或时间戳更新 href 路径。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
