Apple 触摸图标指南
当有人在 Safari 上点击“添加到主屏幕”时，iOS 使用 apple-touch-icon — 而不是 favicon.ico。发送 180×180 PNG，将其作为 apple-touch-icon.png 放在站点根目录中，并将其链接到“<head>”中的“<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon.png'>”。 favicon generator 从任何源图像中导出正确大小的 PNG，本指南解释了 iOS 主屏幕图标系统的每个细节。
apple-touch-icon 是与 favicon.ico 完全独立的资产。浏览器选项卡使用 favicon.ico（或链接的 PNG/SVG）。 iOS 主屏幕安装使用 apple-touch-icon。如果没有 apple-touch-icon，Safari 会截取页面视口的低分辨率屏幕截图，并将其用作主屏幕图标 - 这是一个模糊、无品牌的结果，与本机应用程序相比看起来不专业。
Apple 早在 2007 年就在 iOS 1.1.3 中引入了 apple-touch-icon，此后随着 iPhone 和 iPad 屏幕密度的增加，不断改进支持的尺寸。当前单个全设备文件的建议尺寸为 180×180 像素。在 iPhone 6 Plus、iPhone X 和所有后续 iPhone 型号上，此尺寸以 60pt @3x 密度显示。较旧的型号（第一代 iPhone SE、Plus 版 iPhone）在 2 倍时使用 120×120 — iOS 自动缩小 180×180 文件以适应。
对于 iPad 覆盖范围，Apple 建议 iPad Pro (3x) 为 167×167，标准 iPad 为 152×152。实际上，用作 apple-touch-icon 的单个 180×180 文件可以接受地涵盖所有这些情况，因为 iOS 通过高质量双线性过滤进行了缩小。如果 iPad Pro 上的像素完美清晰度是首要任务，请添加额外的“<link rel='apple-touch-icon'sizes='167x167'href='/apple-touch-icon-167x167.png'>”标签。
PNG 格式对于 apple-touch-icon 是必需的。 iOS 忽略主屏幕图标的 .ico、JPEG、SVG 和 GIF。始终导出 PNG-32（带 Alpha 通道）或 PNG-24（不带透明度，如果您的图标具有纯色背景）。支持并推荐透明度 - 透明背景图标可让 iOS 在较旧的 iOS 版本上应用其标准圆角和光泽效果。
安全裕度对于 apple-touch-icon 很重要。尽管 iOS 不再应用旧的光泽叠加层（在 iOS 7 中删除），但它确实将图标剪辑为圆角矩形形状。让您的核心徽标在所有侧面嵌入约 10%，以确保圆角不会遮挡任何重要内容。安全区域大约是 180×180 画布内的 162×162 像素。
将 apple-touch-icon 文件放置在域的根目录下非常重要。尽管您可以通过链接标记 href 使用任何 URL，但某些版本的 iOS Safari 和某些 Apple 爬网程序（用于 Spotlight 搜索引擎集成）将尝试直接从根目录获取 /apple-touch-icon.png 或 /apple-touch-icon-precomposed.png，而不读取 HTML 链接标记。将文件放置在根目录下可以提供最佳的兼容性。
该标签的 `precomposed` 变体 — `<link rel='apple-touch-icon-precomposed'>` — 告诉旧的 iOS 版本不要对您的图标应用任何额外的视觉效果（光泽、圆角、阴影）。 Apple 在 iOS 7 中删除了这些效果，因此到 2026 年，“apple-touch-icon”和“apple-touch-icon-precomposed”之间的区别与现代 iOS 无关。使用简单的“apple-touch-icon”相对值。
使用多个链接标签支持多个尺寸声明。为了在所有 Apple 设备上获得最大精度，您可以声明：“<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon-180x180.png'>”（适用于 iPhone 6 Plus 及更高版本）、“<link rel='apple-touch-icon'sizes='167x167' href='/apple-touch-icon-167x167.png'>”（适用于 iPad Pro）以及`<link rel='apple-touch-icon'sizes='152x152' href='/apple-touch-icon-152x152.png'>` 适用于旧款 iPad。 iOS 选择最接近的匹配。
Apple Watch 不使用 apple-touch-icon 作为手表应用程序图标 - 这些图标来自本机应用程序包。但是，如果用户从 Apple Watch 浏览器导航到您的网站，Safari Watch 会在书签列表中显示 apple-touch-icon。同样的 180×180 PNG 在这里工作，没有任何改变。
Mac 上的 macOS Safari 在将网站作为 Web 应用程序添加到 Dock 时也会使用 apple-touch-icon（macOS Sonoma 及更高版本允许将网站固定为 Safari 中的 Web 应用程序）。 apple-touch-icon 用作 Dock 图标。这使得 apple-touch-icon 不仅对于移动设备很重要，对于现代 macOS 上的 Mac 用户也很重要。
更新 apple-touch-icon 时，iOS 会缓存用户设备上的旧图标，并且不会检查更新，除非用户删除主屏幕图标并重新添加它，或清除 Safari 的缓存。服务器端对此缓存没有控制——它是客户端 iOS 行为。与利益相关者沟通这一点有助于设定品牌重塑传播到现有主屏幕保存的速度的期望。
正确测试 apple-touch-icon 需要物理 iOS 设备或 Xcode iOS 模拟器。在设备上，打开 Safari，导航到您的站点，点击“共享”按钮，然后选择“添加到主屏幕”。对话框中的预览应显示您的 apple-touch-icon。如果它显示屏幕截图，则说明该文件无法通过其声明的 URL 访问，或者您的 HTML 中缺少链接标签。
favicon generator 输出 180×180 apple-touch-icon.png 作为标准 favicon 包的一部分。生成后，将文件放在站点根目录下，并将链接标签添加到 HTML `<head>` 中。有关 apple-touch-icon 附带的所有图标尺寸的完整指南，请参阅 favicon sizes explained 参考。
工作原理
- 1
生成一个180×180 PNG
将您的徽标或品牌标志（512×512 PNG 或 SVG 源）上传到 [favicon generator](tool:favicon-generator)。该软件包包含 apple-touch-icon.png，分辨率为 180×180 像素，可供使用。
- 2
应用安全区域填充
确保您的徽标嵌入 180×180 画布每条边缘至少 10%（18 像素）。这可以防止 iOS 的圆角剪切您的图稿。生成器自动应用安全裕度。
- 3
将文件放置在您的站点根目录下
将 apple-touch-icon.png 复制到站点的根目录 - 与服务 index.html 或主页的目录相同。可访问的 URL 应为 https://yourdomain.com/apple-touch-icon.png。
- 4
将链接标签添加到 <head>
在 HTML `<head>` 中，添加：`<link rel='apple-touch-icon'sizes='180x180' href='/apple-touch-icon.png'>`。对于多种设备尺寸，还可以为 167×167 和 152×152 添加附加标签。
- 5
使用“添加到主屏幕”进行测试
在 iPhone 或 iPad 上，打开 Safari，导航到您的网站，点击共享，然后选择“添加到主屏幕”。预览对话框应显示您的 apple-touch-icon。如果显示屏幕截图，请检查文件路径和链接标记语法。
立即尝试
生成您的 apple-touch-icon
Favicon 生成器常见问题
apple-touch-icon 的尺寸是多少？+
180×180 像素 PNG 适用于当前所有 iPhone。该单个文件还涵盖较旧的 iPhone 型号（缩小至 120×120）和 iPad（152×152 和 167×167）。如果 iPad Pro 清晰度很关键，请另外添加明确的 167×167 和 152×152 链接标签。
apple-touch-icon 需要什么格式？+
仅限 PNG。 iOS 忽略主屏幕图标的 .ico、JPEG、SVG 和 GIF。导出方形 PNG-32（带 Alpha）或 PNG-24（纯色背景）。支持透明度并在 iOS 主屏幕上清晰显示。
apple-touch-icon.png 应该放在哪里？+
在您的站点根目录中，可通过 https://yourdomain.com/apple-touch-icon.png 访问。某些版本的 iOS Safari 和 Apple 爬虫直接获取此路径，而不读取 HTML 链接标签。链接标记 href 可以指向任何路径，但根位置提供了最大的兼容性。
如果我有 apple-touch-icon，我还需要 favicon.ico 吗？+
是的。 apple-touch-icon 仅适用于 iOS 主屏幕安装。浏览器选项卡、书签栏、Windows 快捷方式和所有非 iOS 上下文仍然使用 favicon.ico 或通过标准链接标签链接的 PNG/SVG。这两种资产有完全不同的用途。
apple-touch-icon 和 apple-touch-icon 预合成有什么区别？+
预合成的变体告诉旧的 iOS 不要应用视觉效果（光泽、圆角）。 Apple 在 iOS 7 (2013) 中删除了这些影响，因此这种区别在 2026 年无关紧要。在所有新项目中使用 `rel='apple-touch-icon'`。
为什么我的网站在 iOS 上显示屏幕截图而不是 apple-touch-icon？+
文件无法通过声明的 URL 访问（检查 404 错误）、HTML `<head>` 中缺少链接标记，或者文件格式不是 PNG。通过直接在浏览器中打开 URL 来验证 URL 是否正确解析，并确认链接标记使用 `rel='apple-touch-icon'`。
apple-touch-icon 是否需要安全区填充？+
是的。 iOS 将图标剪辑为圆角矩形。将核心徽标在所有边上插入约 10%（在 180×180 画布上约填充 18 像素）。这可确保圆角不会夹住品牌标志的重要部分。