必须同时满足三件事：标签页图标能显示、ios主屏图标不拉伸、新开外链不被劫持；只写rel="icon"或只加rel="noopener noreferrer"都会漏掉至少一个终端或安全环节。
必须同时满足三件事：标签页图标能显示、iOS主屏图标不拉伸、新开外链不被劫持。只写 rel="icon" 或只加 rel="noopener noreferrer" 都会漏掉至少一个终端或安全环节。
target="_blank" 外链必须配 rel="noopener noreferrer"
这个组合不是“建议”，是防止原页面被篡改的硬性要求。Chrome 88+ 虽默认启用 noopener 行为，但 Safari 和 Firefox 仍依赖显式声明；noreferrer 则确保 Referer 不泄露，且在多数浏览器中强化 opener 隔离。
-
rel必须小写、无空格、无连字符：rel="noopener noreferrer"合法，rel="NOOPENER"或rel="noopener noreferrer "（末尾空格）无效 - 仅对
<a></a>和<form></form>生效，且必须配合target="_blank"（或其它非_self值），单独写rel属性会被浏览器忽略 - 富文本编辑器、CMS 评论区、
v-html渲染的内容最容易漏——这些地方通常自动加target="_blank"，但不会补rel -
window.open(url, "_blank")不受该属性控制，必须显式传 features 字符串：window.open(url, "_blank", "noopener=yes")
rel="icon" 图标必须按真实尺寸并列声明
sizes 属性在 <link rel="icon"> 中只是标注，浏览器根本不拿它选图。真正起作用的是 href 指向的文件物理尺寸、type 是否匹配、服务器返回的 Content-Type，以及它在 中的顺序。
- 桌面标签页：至少提供
/favicon-16x16.png和/favicon-32x32.png，对应type="image/png"和sizes="16x16"、sizes="32x32" - PWA 和 Android 启动图：靠
manifest.json的icons数组，HTML 中的rel="icon"对它完全无效 - iOS 主屏幕图标：必须用
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">，Safari 完全不读rel="icon"的 PNG，且要求纯色背景、无透明边距 -
.ico文件仍需保留，用于 IE 和旧环境兜底；用工具打包多尺寸进单个/favicon.ico，浏览器会从中提取对应图层
rel="stylesheet" 和 rel="manifest" 不能省略或拼错
rel 是强制属性，缺值或写错等于整条 <link> 被跳过。尤其 rel="stylesheet" 写错会导致白屏，而 rel="manifest" 写错会让 PWA 启动图标失效。
-
rel="stylesheet"必须全小写、带英文引号、无空格：rel="stylesheet"合法，rel=stylesheet（缺引号）或rel=" StyleSheet "（大小写/空格错）静默失败 -
rel="manifest"必须存在且路径正确，否则 Chrome 不加载manifest.json，PWA 图标、启动画面、离线能力全部失效 -
rel="preload"和rel="prefetch"容易混淆：preload必须带as属性（如as="script"），否则多数浏览器忽略；prefetch不阻塞渲染，适合预取下一屏资源 - 所有
<link>必须放在内，放在可能导致 FOUC 或 SSR hydration 错误
最常被忽略的是：iOS 不看 rel="icon"，PWA 不读 HTML 里的 sizes，而 target="_blank" 在 CMS 输出里几乎从不自带 rel。这三处不手动校验，就等于把兼容性和安全性交给了运气。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
