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 ピクセル
- 指定したアイコンのパスが無効
- アイコンの背景が透明でない