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

iOS Safari のユーザーがプログレッシブ ウェブアプリ（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. ページの <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 ピクセル
  • 指定したアイコンのパスが無効
  • アイコンの背景が透明でない

リソース