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 タッチアイコンを追加する方法
<link rel="apple-touch-icon" href="/example.png">をページの<head>に追加します。<!DOCTYPE html> <html lang="en"> <head> … <link rel="apple-touch-icon" href="/example.png"> … </head> …/example.pngは、アイコンの実際のパスに置き換えます。
優れたユーザー エクスペリエンスを提供するために、次の点にご留意ください。
- アイコンが 180x180 ピクセルまたは 192x192 ピクセルである
- 指定されたアイコンへのパスは有効です
- アイコンの背景が透明でない