手机端图标需用特定link标签：iOS用rel="apple-touch-icon"配sizes属性（如180×180），Android/PWA须通过rel="manifest"引入manifest.json声明PNG图标；favicon.ico仍需保留但作用不同，三者互不冲突。
link标签设置手机端图标的关键写法
手机端图标（也就是 iOS 的「添加到主屏幕」图标、Android PWA 启动图标等）不能只靠一个 <link rel="icon"> 解决，必须用特定 rel 值和对应尺寸的 PNG 图片，并配合 media 或 sizes 显式声明用途。
iOS Safari 添加到主屏幕图标怎么配
iOS 要求使用 rel="apple-touch-icon"，且最好提供多个尺寸（尤其是 180×180），系统会优先选最匹配的。不加 precomposed（已废弃），也不需要透明背景——iOS 会自动加圆角和高光，所以图标本身应为正方形、无边距、带足够留白。
- 必须提供
<link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png" sizes="180x180"> - 可选补充：120×120（iPhone）、152×152（iPad）、167×167（iPad Pro）
- 路径必须是绝对路径或根相对路径（如
/icons/...），相对路径在深层页面可能 404 - 不要用 ICO 或 SVG；Safari 不支持 SVG 作为
apple-touch-icon
Android 和 PWA 启动图标用 manifest.json 还是 link？
纯 HTML 页面想支持 Android 添加到桌面或 PWA 安装横幅，<link> 只能覆盖极小部分场景（比如旧版 Chrome 的 manifest fallback），真正可靠的方式是配 manifest.json 并通过 <link rel="manifest" href="/manifest.json"> 引入。link 标签本身不定义图标尺寸，只是指向清单文件。
-
<link rel="manifest" href="/manifest.json">必须放在中，且href路径需可被同源访问 -
manifest.json里用icons数组声明 PNG 图标，例如：[{"src":"/icons/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/icons/icon-512.png","sizes":"512x512","type":"image/png"}] - Android 不读取
apple-touch-icon，也不会从favicon.ico自动缩放生成启动图 - Chrome 110+ 已移除对
<link rel="icon" sizes="192x192">作为 PWA 图标的识别支持
favicon.ico 还需要吗？跟手机图标冲突吗
需要，但作用完全不同：favicon.ico 仅用于桌面浏览器标签页、书签栏、历史记录等，和手机端图标完全解耦。它不会干扰 iOS 或 Android 的图标加载，但若只放一个低分辨率 favicon.ico，又没配其他 link，那手机端大概率显示空白或默认图标。
立即学习“前端免费学习笔记（深入）”；
- 仍建议保留：
<link rel="icon" href="/favicon.ico" sizes="any">（sizes="any"是告诉现代浏览器这是 ICO 格式，可缩放） - 可额外加 PNG favicon 提升高清屏显示质量：
<link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32"> - 注意顺序：把
apple-touch-icon和manifest放在favicon之前，避免某些旧浏览器误用 - 所有图标文件必须实际存在、返回 200 状态码，404 会导致 iOS 完全忽略该
link
apple-touch-icon 加 sizes 属性、manifest.json 里 src 路径没加域名或协议导致跨域失败。这些错误不会报 JS 错，但图标就是不显示。 
