apple-touch-icon-precomposed 为何不显示？

Question

**问题：apple-touch-icon-precomposed 为何不显示？** 在iOS设备上添加网页到主屏幕后，`apple-touch-icon-precomposed` 图标未正常显示，常见原因包括：图标路径错误或文件不存在、命名不规范、服务器MIME类型配置不当。此外，若HTML中未正确声明 `<link href="icon.png" />`，或与 `apple-touch-icon` 冲突，系统将回退至默认截图。同时，Safari会优先使用无`-precomposed`后缀的图标，导致该属性被忽略。确保图标尺寸合规（建议180×180px）、格式为PNG，并部署于Web服务器根目录，可提升识别率。

Answer 1

1. 基础概念：什么是 apple-touch-icon-precomposed？

在iOS设备中，当用户将网页添加到主屏幕时，系统会尝试显示一个自定义图标。苹果引入了 apple-touch-icon-precomposed 这一<link />标签属性，用于指定在不应用系统默认视觉效果（如圆角、阴影、光泽）的情况下直接使用开发者提供的图标。

相比之下，apple-touch-icon 允许Safari对图标进行“美化”处理。而带有 -precomposed 后缀的图标则表示已预先设计好样式，无需额外修饰。

2. 常见问题排查清单

• 图标文件路径错误或资源404
• 未在HTML头部正确声明<link />标签
• 服务器未设置正确的MIME类型（image/png）
• 文件命名不符合规范（如大小写敏感问题）
• 同时声明了 apple-touch-icon 和 apple-touch-icon-precomposed 导致冲突
• Safari优先级机制忽略 -precomposed
• 图标尺寸不符合推荐标准
• 缓存导致旧图标残留
• 部署位置不在Web根目录
• PNG格式损坏或包含透明通道异常

3. HTML声明方式与优先级分析

以下为正确的<link />标签用法示例：

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png">

注意：若同时存在两个标签，iOS Safari会优先选择无 -precomposed 的版本，并对其施加视觉效果。因此，若希望完全控制图标外观，应仅保留 apple-touch-icon-precomposed 声明。

4. 推荐图标规格与部署策略

设备类型	推荐尺寸 (px)	文件格式	建议路径
iPhone 6/7/8 Plus	120×120	PNG	/apple-touch-icon-120x120.png
iPhone X/XS/11 Pro	180×180	PNG	/apple-touch-icon-180x180.png
iPad Pro	152×152	PNG	/apple-touch-icon-152x152.png
通用后备图标	192×192	PNG	/icon-192x192.png (PWA兼容)

强烈建议将主要图标（180×180）放置于Web服务器根目录，并命名为 apple-touch-icon.png，以便系统自动探测。

5. 服务器配置与MIME类型验证

Nginx 配置片段：

location ~* \.(png)$ {
    add_header Content-Type image/png;
}

Apache (.htaccess) 示例：

AddType image/png .png

错误的MIME类型（如text/html）会导致浏览器拒绝加载图标资源。可通过Chrome DevTools Network面板检查响应头中的Content-Type字段是否正确。

6. 缓存机制与调试技巧

iOS Safari对apple-touch-icon有强缓存行为。即使更新了图标文件，也可能持续显示旧版本。解决方法包括：

1. 修改文件名或添加版本查询参数（如?ver=2）
2. 清除Safari历史记录与网站数据
3. 通过iTunes或Xcode设备日志查看图标加载过程
4. 使用远程调试工具连接iOS设备分析Network请求

7. 自动发现机制与fallback逻辑

若未在HTML中显式声明<link />，iOS会按以下顺序尝试获取图标：

graph TD A[开始] --> B{是否存在 apple-touch-icon.png?} B -- 是 --> C[加载并使用] B -- 否 --> D{是否存在 apple-touch-icon-precomposed.png?} D -- 是 --> E[加载并使用] D -- 否 --> F[回退至页面截图]

因此，将图标置于根目录并采用标准命名可极大提升兼容性，尤其适用于静态站点或CDN托管场景。

8. 现代PWA与跨平台兼容性考量

随着Progressive Web Apps的发展，web-app-manifest.json 成为更通用的图标管理方案。但仍需保留apple-touch-icon以确保iOS兼容性。

{
  "icons": [
    {
      "src": "/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

综合使用manifest + link标签 + 根目录自动发现机制，可实现全平台一致体验。