必须显式声明180×180尺寸且提供无透明通道的PNG图标，否则iOS会fallback至模糊截图；仅写<link rel="apple-touch-icon" href="...">不够，需加sizes="180x180"并确保路径可访问、返回200状态码及image/png类型。
为什么 apple-touch-icon 不能只靠 <link rel="apple-touch-icon"> 就完事
苹果设备（iOS/iPadOS/macOS）在用户将网页添加到主屏幕时，会优先查找特定尺寸的 apple-touch-icon 图标，而不是直接缩放任意图片。如果只写一行 <link rel="apple-touch-icon" href="/icon.png">，Safari 会尝试从该图中裁剪出正方形区域，但默认不加 precomposed 或尺寸声明时，系统可能叠加高光效果、自动圆角裁剪，甚至 fallback 到截屏——这不是“极简首屏图”，而是不可控的渲染结果。
- 必须显式指定尺寸，推荐用
180x180（适配所有当前 iPhone/iPad 的 @2x/@3x 屏幕） - 图标需为无透明通道的 PNG（Apple 不支持 WebP 或 SVG 作为 touch icon）
- 避免使用
precomposed（已废弃，且会禁用系统自动添加的圆角和阴影，反而让图标显得生硬）
怎么写 HTML 才让 iOS 真的只显示你给的图，不多不少
极简首屏图的核心是「不干预、不渲染、不缩放」——让系统原样取用。关键不是加一堆 <link>，而是精准提供一张 180×180 像素、纯色背景 + 居中图形、无边距无透明的 PNG，并用标准 link 标签指向它：
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-
sizes属性必须写，且值为"180x180"（字符串，带引号），不能省略或写成180x180（无引号会被忽略） -
href路径必须可公开访问，且服务器返回Content-Type: image/png - 不要加
type属性——Safari 忽略它；也不要加media或color，这些对 touch icon 无效
为什么本地测试时图标总显示成旧版本或空白
iOS Safari 对 apple-touch-icon 缓存极其顽固：即使你替换了图片文件，只要 URL 没变，它就永远读缓存副本，连强制刷新（Cmd+R）都不管用。
- 最可靠办法：修改
href路径，比如加版本号/apple-touch-icon.v2.png - 或者在服务器端为该文件配置强缓存失效头：
Cache-Control: no-cache, must-revalidate（仅开发期用，上线后应设长期缓存） - 真机上验证前，先在主屏幕删掉旧的网页快捷方式，再重新添加——这是唯一清空图标缓存的方式
要不要同时提供 apple-touch-startup-image
不要。这个属性早在 iOS 8 就被废弃，现代 iOS（15+）完全忽略它。所谓“首屏图”其实是应用启动时的静态画面（splash screen），而网页添加到主屏幕后启动，系统默认展示的是整个页面的截图（即你当前滚动位置的快照），无法用 HTML 控制。真正能控制的只有图标本身。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
如果你看到某些网站启动时有纯色页，那是因为它们用了 PWA 的 manifest.json 中的 background_color 和 theme_color，但这属于 PWA 范畴，和 apple-touch-icon 无关。单靠 HTML 无法实现启动图定制。
极简的终点就是一张干净的 180×180 PNG 和一行精准的 <link>——多写的都是干扰项。
