rel="manifest"必须置于<head>中且href路径可访问；manifest文件需为.webmanifest或.json后缀、Content-Type正确；图标需在manifest中声明192x192和512x512 PNG，HTML中favicon与manifest icons尺寸及src严格对齐；iOS需单独配置apple-touch-icon。
rel="manifest"必须写在里且href路径要可访问
浏览器只在 <head> 中解析 <link rel="manifest">，放错位置（比如 <body> 里）就完全不加载，控制台也不报错。href 必须指向一个真实存在的 JSON 文件，且服务器返回的 Content-Type 必须是 application/manifest+json 或至少 application/json；用 text/plain 会静默失败。
本地开发时，file:// 协议下 Chrome 和 Edge 直接禁用 manifest 加载——必须起本地服务（如 npx serve 或 VS Code Live Server）。
- 推荐用根相对路径：
href="/site.webmanifest"，避免子页面（如/blog/post.html）因相对路径解析出错 - 不要写成
href="./site.webmanifest"或href="site.webmanifest" - 文件名不强制叫
site.webmanifest，但后缀必须是.webmanifest或.json；Safari 对.json支持不稳定，优先用.webmanifest
manifest.json里icons数组的尺寸和type必须匹配HTML中声明的favicon
Android PWA 安装图标、桌面快捷方式、Windows 开始菜单图标的来源全靠 manifest.json 中的 icons 数组，不是 HTML 里的 <link rel="icon">。但这两处的尺寸和格式必须对齐，否则会出现模糊、 fallback 到文字图标，或安装失败。
- 至少提供
192x192和512x512两个 PNG 尺寸；192x192是 Android PWA 最小要求，512x512是 Windows 和 iOS PWA 推荐尺寸 - 每个 icon 对象必须带
src、sizes（格式严格为"192x192"）、type（如"image/png"） -
src路径需与 HTML 中<link rel="icon">的href一致，否则预加载失效、PWA 图标不更新
Chrome 90+ 和 Safari 15+ 不再识别rel="shortcut icon"
很多老教程还教写 <link rel="shortcut icon" href="favicon.ico">，这是无效的。Chrome 90+、Firefox 84+、Safari 15+、Edge 90+ 全部忽略该 rel 值。如果同时写了 shortcut icon 和 icon，浏览器可能取第一个（错误的），甚至干扰 manifest 解析。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
正确做法只保留：<link rel="icon" href="/favicon.svg" type="image/svg+xml">（SVG 优先），再补 PNG fallback：
<link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"><link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png">
注意：sizes 属性对 .ico 文件无效，也别写 sizes="16x16 32x32"（空格分隔不支持）。
Apple 设备不读manifest.json里的icons，必须单独加apple-touch-icon
iOS/macOS Safari 完全不从 manifest.json 取图标，也不看 <link rel="icon">。PWA 安装到主屏幕、书签栏显示、Safari 标签页缩略图，全靠 <link rel="apple-touch-icon">。
- 必须提供
180x180PNG，无圆角、无透明边距（iOS 会自动加光泽和圆角） - 可选补充
167x167（iPad Pro）、152x152（旧 iPad）、120x120（iPhone） - 不要加
type或sizes以外的属性；type在 Apple 场景下被忽略，但加上不报错 - 搭配
<meta name="apple-mobile-web-app-capable" content="yes">才能启用全屏 PWA 模式
最容易被忽略的是：即使你 manifest.json 写得再全，没这行 <link rel="apple-touch-icon">，iOS 用户点「添加到主屏幕」看到的就是一个带网站标题的灰色方块。
