The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

マニフェストで少なくとも 192px のアイコンを定義する

監査が重要である理由

モバイル端末では、ユーザーがホーム画面にアプリを追加した際に表示するアイコンが必要です。 アイコンは、ウェブアプリ マニフェストの icons 配列に指定します。

192 ピクセルのアイコンがあると、最も大きな Android 端末でもアイコンが適切に表示されます。 サイズの小さい端末には小さいアイコンが必要になるため、Android では 192 ピクセルのアイコンを妥当なサイズに縮小します。 つまり、ウェブアプリ マニフェストで小さいサイズのアイコンを指定することは可能ですが、そうする必要性はありません。

監査に合格する方法

ウェブアプリ マニフェストに 192 ピクセルのアイコンを追加します。

{
  ...
  "icons": [{
    "src": "images/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  ...
}

アプリに "Add to Homescreen" 機能を適切に実装して、テストを実施する方法については、マニフェストを使用するで紹介しているガイドをご覧ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

この監査で保証するのは、Android 端末でアイコンが適切に表示されることのみです。 他のオペレーティング システムでは、最適な表示のために異なるサイズのアイコンが必要になる場合があります。

Lighthouse ではマニフェストを取得して、icons プロパティが 192 ピクセルのアイコンを参照しているか検証します。 なお、Lighthouse で取得するマニフェストは、Chrome がページで使用するマニフェストとは別のファイルであるため、正確な結果が出ない場合があります。 また、アイコンがキャッシュに実在することはチェックしない点にも注意してください。 Lighthouse で確認するのは、ウェブアプリ マニフェストで 192 ピクセルのアイコンが定義されていることのみです。