能被iOS识别，但仅限Safari且必须满足180×180 PNG、无透明通道、绝对路径三重条件；否则静默回退至网页截图。
link标签加rel="apple-touch-icon"能被iOS识别吗
不能直接用 rel="apple-touch-icon" 让所有 iOS 设备正确显示——它只对 Safari 有效，且必须满足尺寸、格式、路径三重条件。iOS 不会自动从 favicon.ico 或普通 icon.png 推导，必须显式声明。
常见错误现象：Safari 添加到主屏幕后图标是灰色方块，或显示网站截图而非图标，基本都是因为：尺寸不对（比如只提供了 192x192）、没加 precomposed（旧版 iOS 要求）、或路径返回了 404/302 重定向。
- 必须提供至少一个
<link rel="apple-touch-icon" href="/icon-180.png">，href指向真实存在的 PNG 文件（不支持 SVG） - 推荐尺寸：
180×180（iPhone 6+ 及更新机型），旧设备如 iPhone 5 需要120×120，可叠加多个link并用sizes属性区分 - 不要加
type属性（iOS 忽略），也不要加media（不生效）
Android Chrome 主屏幕图标用什么rel值
Android（Chrome、Edge、Firefox for Android）主要依赖 rel="manifest"，而不是单独的 apple-touch-icon。但为了兼容未启用 Web App Manifest 的旧版本 Chrome，仍建议保留 rel="icon" 标准图标链。
使用场景：用户在 Chrome 中点击「添加到主屏幕」时，若没找到 manifest.json，会 fallback 到 <link rel="icon" sizes="192x192" href="/icon-192.png">；如果连这个也没有，就退化为 favicon.ico（但仅限 192×192 尺寸才被识别为主屏幕图标）。
立即学习“前端免费学习笔记（深入）”；
-
rel="icon"必须带sizes属性，且值为精确数字如"192x192"（不能写"192x192 512x512"） - Android 不识别
apple-touch-icon，所以 iOS 和 Android 的图标声明要分开写，互不干扰 - 确保
/icon-192.png返回 HTTP 状态码 200，且响应头包含Content-Type: image/png
Web App Manifest 是不是必须的
不是必须，但不配 manifest，Android 主屏幕图标大概率无法正常显示，且无法控制启动画面、主题色、显示模式等关键体验。iOS 虽不读 manifest，但现代 PWA 实践已默认要求它。
性能影响几乎为零：manifest 是纯 JSON，体积小，浏览器预加载优先级低，但解析快；兼容性上，Chrome 38+、Firefox 44+、Edge 79+、Safari 16.4+ 均支持。
- 在 HTML 中用
<link rel="manifest" href="/manifest.json">引入，路径必须是同源且可公开访问 -
manifest.json至少包含name、icons（数组，每个含src、sizes、type）、start_url - 注意：Safari 16.4+ 才开始读取 manifest 中的
icons，此前完全忽略；所以 iOS 仍需保留apple-touch-iconlink
为什么图标在真机上不更新
缓存是最大元凶。iOS Safari 会把 apple-touch-icon 缓存数天甚至更久，且不随 HTML 更新而刷新；Android Chrome 对 manifest 和图标文件也有强缓存策略。
容易被忽略的地方：改完图标后只刷新网页没用，必须清除浏览器缓存，或换设备测试；更隐蔽的是，如果服务器返回了 Cache-Control: immutable 或长期 max-age，连硬刷新都无效。
- 开发阶段可在
href后加查询参数强制更新，例如href="/icon-180.png?v=2"（上线后应移除） - 检查网络面板，确认图标请求返回 200，且响应头中
Content-Length非零、无重定向 - Android 上可进 Chrome 设置 → 网站设置 → 网站数据 → 找到你的域名 → 清除数据；iOS 需「设置 → Safari → 清除历史记录与网站数据」
