rel="apple-touch-icon" 是 iOS Safari 识别的专用图标链接标签，用于网站添加到主屏时显示自定义 PNG 图标；必须置于 head 中，使用绝对或根相对路径，尺寸严格正方形且 Content-Type 为 image/png。

rel="apple-touch-icon" 是什么，真的需要加吗

不需要强制加，但加了能让 iPhone 用户把网站添加到主屏时显示自定义图标，否则 Safari 会截取页面左上角区域生成一个模糊图标。它只对 iOS Safari 有效，Android Chrome 完全不识别这个 rel 值。

必须用 <link> 标签写在 <head> 里

不能用 CSS 背景、不能用 <img>、不能放在 <body>。iOS 只在文档解析阶段扫描 <head> 中的 <link rel="apple-touch-icon">。

• 推荐同时提供多个尺寸，iOS 会按需选取最匹配的一个（如 180x180 用于 iPhone SE/12/13/14/15 的主屏）
• 路径必须是绝对 URL 或根相对路径（/icons/icon-180.png），相对路径（icons/icon-180.png）在深层路由下容易 404
• 图标必须是 PNG，无透明通道更稳妥（iOS 旧版本对 alpha 渲染异常）

常见错误：图标不显示的三个原因

用户反馈“加了没用”，大概率卡在这三处：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• Content-Type 返回不是 image/png —— 检查服务器是否正确配置 MIME 类型，Nginx 需确认 types 块包含 image/png png;
• 图标尺寸不是正方形（比如 180x179）—— iOS 会直接忽略，必须严格等宽高
• HTTP 状态码不是 200（如 302 重定向到登录页）—— iOS 不跟随重定向，直接放弃加载

实际推荐写法（含 fallback）

单个图标够用就写一行；追求兼容性可叠加多个，iOS 会取第一个满足当前设备尺寸的：

立即学习“前端免费学习笔记（深入）”；

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png">

注意：sizes 属性不是必须，但加上能提升匹配精度；如果只提供一个，优先用 180x180，它是目前主流 iPhone 的原生尺寸。别指望 rel="icon" 或 manifest.json 替代它 —— iOS 就认这个 rel 值。