rel="apple-touch-icon" 是 iOS Safari 识别的专用图标链接标签，用于网站添加到主屏时显示自定义 PNG 图标；必须置于 head 中，使用绝对或根相对路径，尺寸严格正方形且 Content-Type 为 image/png。
rel="
apple
-touch-icon" 是什么，真的需要加吗
不需要强制加，但加了能让 iPhone 用户把网站添加到主屏时显示自定义图标，否则 Safari 会截取页面左上角区域生成一个模糊图标。它只对 iOS Safari 有效，Android Chrome 完全不识别这个
值。
必须用
标签写在
里
不能用 CSS 背景、不能用
、不能放在
。iOS 只在文档解析阶段扫描
中的
。
推荐同时提供多个尺寸，iOS 会按需选取最匹配的一个（如
用于 iPhone SE/12/13/14/15 的主屏）
路径必须是绝对 URL 或根相对路径（
），相对路径（
）在深层路由下容易 404
图标必须是 PNG，无透明通道更稳妥（iOS 旧版本对 alpha 渲染异常）
常见错误：图标不显示的三个原因
用户反馈“加了没用”，大概率卡在这三处：
返回不是
—— 检查服务器是否正确配置 MIME 类型，Nginx 需确认
块包含
图标尺寸不是正方形（比如
）—— iOS 会直接忽略，必须严格等宽高
HTTP 状态码不是 200（如 302 重定向到登录页）—— iOS 不跟随重定向，直接放弃加载
实际推荐写法（含 fallback）
单个图标够用就写一行；追求兼容性可叠加多个，iOS 会取第一个满足当前设备尺寸的：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
注意：
属性不是必须，但加上能提升匹配精度；如果只提供一个，优先用
，它是目前主流 iPhone 的原生尺寸。别指望
或
替代它 —— iOS 就认这个
值。
rel180x180/icons/icon-180.pngicons/icon-180.pngContent-Typeimage/pngtypesimage/png png;180x179
sizes180x180rel="icon"manifest.jsonrel