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