必须分开声明：ios用，android用，路径须绝对、尺寸须精准、png不得含透明通道。
link标签怎么写才能让iOS和Android都识别设备图标
直接用 <link rel="icon"> 不行，移动端设备（尤其是iOS）只认特定 rel 值和尺寸声明。必须分开声明，且路径、尺寸、类型都要对得上。
常见错误是只放一个 apple-touch-icon.png 放在根目录就以为万事大吉——实际 iOS 会尝试请求多个尺寸，没匹配上的就 fallback 到默认行为（比如截屏生成），Android Chrome 则可能完全忽略。
-
rel="apple-touch-icon"专供 iOS，不加sizes属性时默认按 180×180 加载；加了sizes才能精准匹配（如sizes="180x180"） -
rel="icon"用于 Android 和桌面端，必须带type="image/png"和明确sizes，否则部分 Android 版本会忽略 - 所有图标文件必须是纯 PNG（无透明通道问题）、无圆角、无阴影、背景为纯白或透明（iOS 会自动加圆角，所以设计稿别自己加）
不同尺寸该用哪些 sizes 值和对应文件名
iOS 实际请求的尺寸比你写的更“贪心”：即使写了 sizes="180x180"，它仍可能去试 152x152、167x167（iPad Pro）。Android Chrome 则主要认 192x192 和 512x512（PWA 场景）。
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180.png">-
<link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167.png">（iPad Pro 12.9"） -
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152.png">（旧 iPad） <link rel="icon" type="image/png" sizes="192x192" href="/icons/android-chrome-192.png"><link rel="icon" type="image/png" sizes="512x512" href="/icons/android-chrome-512.png">
注意：sizes 值必须和文件实际像素严格一致，不能写成 "192x192" 却放一张 200×200 的图——某些 Android WebView 会直接跳过。
为什么加了 link 还是显示默认图标
最常被忽略的是缓存和路径问题。iOS Safari 对 apple-touch-icon 缓存极强，改了文件内容但没改文件名或 URL，它根本不会重新拉取。
- 检查浏览器开发者工具的 Network 面板，过滤
apple-touch-icon，看是否返回 404 或 304 - 确保
href是绝对路径（如/icons/xxx.png），相对路径在深层路由下容易 404 - 服务器需正确返回
Content-Type: image/png，Nginx/Apache 若没配 MIME 类型，可能返回text/plain导致解析失败 - 不要依赖
<link rel="shortcut icon">—— 这个早已被现代移动端忽略
要不要用 manifest.json 配合
单靠 <link> 标签只能解决“添加到主屏幕”时的图标，PWA 安装提示、系统级应用图标、通知图标等，必须靠 manifest.json 中的 icons 数组。
例如：
{
"icons": [
{ "src": "/icons/android-chrome-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/android-chrome-512.png", "sizes": "512x512", "type": "image/png" }
]
}
这个文件要通过 <link rel="manifest" href="/manifest.json"> 引入，且 manifest.json 必须放在 HTTPS 下、响应头带 Content-Type: application/manifest+json。漏掉任一环节，Android 的 PWA 图标就不会生效。
真正麻烦的是：iOS 不读 manifest.json，Android 又不完全信 <link> 标签——两个生态得各写一套，还不能互相替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
