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