有効な apple-touch-icon が指定されていません

iOS Safari ユーザーがプログレッシブ ウェブアプリ（PWA）を 表示されるアイコンは Apple Touch アイコンと呼ばれます。 アプリで使用するアイコンを指定するには、 <head> の <link rel="apple-touch-icon" href="/example.png"> タグ できます。iOS では、ページにこのリンクタグがない場合は、スクリーンショットを撮って 表示されます。言い換えれば、アイコンをダウンロードするよう iOS に指示することで、 向上させることができます

Lighthouse Apple タッチアイコンの監査で不合格になる仕組み

灯台 <link rel="apple-touch-icon" href="/example.png"> のないページにフラグが設定されます。 タグ内に <head> を追加します。

<ph type="x-smartling-placeholder">
</ph> 有効な Apple タッチアイコンが指定されていません

Lighthouse では、アイコンが実際に存在するかどうかは確認されません。 正しいサイズで表示されます。

Apple タッチアイコンを追加する方法

  1. ページの <head> に <link rel="apple-touch-icon" href="/example.png"> を追加します。

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

  2. /example.png は、アイコンの実際のパスに置き換えます。

で確認できます。

優れたユーザー エクスペリエンスを提供するには、次の点を考慮してください。

  • アイコンが 180x180 ピクセルまたは 192x192 ピクセルである
  • アイコンに指定されたパスは有効です
  • アイコンの背景が透明でない

リソース