未提供有效的 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-icon

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

如何添加 Apple 触控图标

  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 像素
  • 指定的图标路径有效
  • 图标的背景不透明

资源