iOS Safari ユーザーがプログレッシブ ウェブアプリ(PWA)を
表示されるアイコンは Apple Touch アイコンと呼ばれます。
アプリで使用するアイコンを指定するには、
<head>
の <link rel="apple-touch-icon" href="/example.png">
タグ
できます。iOS では、ページにこのリンクタグがない場合は、スクリーンショットを撮って
表示されます。言い換えれば、アイコンをダウンロードするよう iOS に指示することで、
向上させることができます
Lighthouse Apple タッチアイコンの監査で不合格になる仕組み
灯台
<link rel="apple-touch-icon" href="/example.png">
のないページにフラグが設定されます。
タグ内に <head>
を追加します。
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 ピクセルである
- アイコンに指定されたパスは有効です
- アイコンの背景が透明でない