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">
タグがないページを報告します。

Lighthouse は、アイコンが実際に存在するかどうか、アイコンのサイズが正しいかどうかはチェックしません。
Apple タップアイコンを追加する方法
ページの
<head>
に<link rel="apple-touch-icon" href="/example.png">
を追加します。<!DOCTYPE html>
<html lang="en">
<head>
…
<link rel="apple-touch-icon" href="/example.png">
…
</head>
…/example.png
は、アイコンの実際のパスに置き換えます。
優れたユーザー エクスペリエンスを提供するために、次の点に注意してください。
- アイコンのサイズは 180x180 ピクセルまたは 192x192 ピクセル
- 指定したアイコンのパスが無効
- アイコンの背景が透明でない