有効な 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 ピクセルである
  • 指定されたアイコンのパスが有効である
  • アイコンの背景が透明ではない

リソース