你是否曾经查看服务器日志，发现满屏都是 apple-touch-icon-152x152.png 这种极其具体的 404 错误？你可能当时就慌了，赶紧打开设计软件，导出了十几个不同尺寸的 Logo，只为了满足苹果那无穷无尽的设备线。
快停下这种无用功吧。
过去，官方文档总是催促开发者为每一种屏幕分辨率创建一个专属图片。结果就是我们的 <head> 标签变得臃肿不堪，塞满了给 iPad Mini、iPhone Pro 等各种设备的链接。这篇 apple touch icon sizes guide 将告诉你，为什么在 2026 年这种做法已经彻底过时了。
2026 年 Apple Touch Icon 尺寸终极指南
当用户在 iPhone 上点击“添加到主屏幕”时，Safari 会寻找一个特定的 PNG 文件来代表你的网站。如果你没提供，iOS 就会自动截取一张极其难看的网页截图。
多年来，标准的建议是生成一大堆文件：老款 iPhone 用 120x120，iPad 用 152x152，iPad Pro 用 167x167，现代 iPhone 用 180x180。这简直是代码仓库的维护噩梦。
现代的“一招鲜”策略
现代 iOS 开发的真相是：苹果的渲染引擎在缩小图片方面做得极其出色。你根本不需要再提供每一种分辨率了。
只要你提供一张高分辨率的图片，iOS 就会自动计算并完美缩放以适应用户的特定设备。今天你真正需要生成的唯一尺寸就是 180x180 像素。
这个尺寸对应的是最大的 iPhone Pro Max 机型所需的 @3x 分辨率。当一台老款 iPad 请求 152x152 的图标时，它只需抓取你的 180x180 文件并缩小即可。肉眼根本看不出任何视觉差异。
真实案例：GitHub 是怎么做的
别只听我一面之词。去看看 GitHub、Stripe 或 Vercel 这些科技巨头的源代码。你不会看到一大块历史遗留的苹果图标代码。他们针对 iOS 设备只提供一个文件。
你应该使用的确切 HTML 代码如下：
<!-- 2026 年你唯一需要的 Apple Touch Icon -->
<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png'>这一行代码取代了过去的六行。它节省了带宽，清理了你的 HTML，并满足了市面上的每一台 iOS 设备。如果你想深入了解具体的 HTML 放置位置，请查看我们的 Apple Touch Icon 完整设置指南。
历史尺寸 vs. 2026 标准
要理解为什么我们可以抛弃旧尺寸，看看苹果硬件的发展就知道了。以下是旧版要求与我们今天实际部署的对比。
| 目标设备 | 旧版尺寸 | 2026 年做法 |
|---|---|---|
| 老款 iPhone (@2x) | 120x120 | 忽略 (iOS 会自动缩小 180px) |
| 老款 iPad (@2x) | 152x152 | 忽略 (iOS 会自动缩小 180px) |
| iPad Pro (@2x) | 167x167 | 忽略 (iOS 会自动缩小 180px) |
| 现代 iPhone Pro (@3x) | 180x180 | 必须提供 |
180x180 图标的设计规则
尺寸对了只成功了一半。iOS 处理这些图标的方式与标准的浏览器 Favicon 不同。如果你只是把标准 Logo 调整一下大小，它在 iPhone 主屏幕上很可能会显得非常违和。
- 绝对不能透明： iOS 不支持主屏幕图标的透明背景。如果你上传了透明的 PNG，苹果会粗暴地用纯黑色填满空白区域。请务必使用纯色背景。
- 不要切圆角： 千万不要预先给你的图片切圆角。上传一个完美的正方形即可。iOS 会自动在你的设计上应用其标志性的“松鼠圆角 (squircle)”遮罩。如果你预先切了圆角，最后会得到奇怪的双重圆角。
- 遵守安全区： 因为苹果会应用遮罩，任何太靠近边缘的 Logo 都会被切掉。将你的主图形居中，并在四周留出大约 20 到 30 像素的内边距。
那 Android 尺寸呢？
我经常看到开发者犯的一个错误，就是试图把 Apple Touch Icon 用在 Android 设备上。虽然旧版 Android 可能会回退使用苹果图标，但现代 Android 完全依赖 Web App Manifest。
Android 需要 192x192 和 512x512 的图标。不要强迫你的 180x180 苹果图标在这里身兼数职。把它们分开处理。你可以在我们的 PWA 图标要求指南 中了解更多关于 Android 的要求。
别再把图标复杂化了
我们浪费了太多时间去追求像素级完美的旧版分辨率。Web 技术已经进步了，浏览器也比十年前聪明得多。
生成一个单一的、高质量的 180x180 PNG。确保它有纯色背景，Logo 居中，并在你的 <head> 中链接它。如果你不想在 Photoshop 或 Figma 里费力调整内边距，直接把你的 Logo 扔进 Mzu favicondl 就行了。我们会自动处理安全区，移除透明度，并生成 iOS 期望的确切 180x180 文件，以及你标准的 Web Favicon。