未提供有效的 Apple-touch-icon

当 iOS Safari 用户将渐进式 Web 应用 (PWA) 添加到主屏幕时，显示的图标称为 Apple 触摸图标。您可以通过在页面的 <head> 中添加 <link rel="apple-touch-icon" href="/example.png"> 标记来指定应用应使用的图标。如果您的网页没有此链接标记，iOS 会通过截取网页内容来生成图标。换言之，指示 iOS 下载图标可以带来更完善的用户体验。

Lighthouse Apple 触摸图标审核如何失败

Lighthouse 会对 <head> 中不含 <link rel="apple-touch-icon" href="/example.png"> 标记的页面进行标记：

未提供有效的 apple-touch 图标

Lighthouse 不会检查图标是否实际存在，或者图标的大小是否正确。

如何添加 Apple Touch 图标

  1. 将 <link rel="apple-touch-icon" href="/example.png"> 添加到页面的 <head>：

    <!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="apple-touch-icon" href="/example.png">
    …
  </head>
  …

  2. 将 /example.png 替换为图标的实际路径。

为了提供良好的用户体验，请确保：

  • 图标为 180x180 像素或 192x192 像素
  • 指定的图标路径有效
  • 图标的背景不透明

资源