未提供有效的 Apple-touch-icon

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

Lighthouse Apple Touch 图标审核失败的原因

灯塔 标记不含 <link rel="apple-touch-icon" href="/example.png"> 的网页 <head> 标记中：

<ph type="x-smartling-placeholder">
</ph> 未提供有效的 Apple 触摸图标

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

资源