web-dev-qa-db-ja.com

2018年第1四半期のプログレッシブWebアプリ（PWA）にはどのアイコンサイズが必要ですか？

プログレッシブWebアプリ（PWA）に必要なアプリケーションアイコンとサイズはどれですか？たとえば、SafariがPWAをサポートしていない場合、Appleアイコンを含める必要がありますか？

開発者の間では一般的なニーズのように思えますが、現時点では、公式の仕様やガイダンスがあるかどうかはわかりません。

progressive-web-apps
12
Dan Sorensen

Androidのアイコンの完全なセットを含める場合：

icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512

https://app-manifest.firebaseapp.com/ のような便利なツールがあり、アイコンを作成できます。

iOSの場合、次のものが必要です。

icon-120x120
icon-180x180

正方形の背景（透明な背景にすることはできません）。 https://github.com/gokulkrishh/awesome-meta-and-manifest での参照に適したリポジトリ

9
yaircarreno

Google Developers

アイコンには、192pxおよび512pxサイズのアイコンを含める必要があります

7
Tanmay

World Wide Web Consortium（W3C）のプログレッシブWebアプリのアプリマニフェスト仕様（ 8.7アイコンメンバー ）：

  • さまざまな形式とサイズの複数のアイコンを宣言できます
  • W3C仕様では、必要なサイズまたは推奨されるサイズは特定されていませんが、ユーザーエージェントがこれらのルール内で最も適切なものを選択できるように、提供するアイコンの属性（サイズ、形式、パス）を指定できます：
    • ユーザーエージェントは、その使用に適した宣言されたLASTアイコンを使用する必要があります。
    • 最初の試行が何らかの理由で失敗した場合、次に最も適切なものにフォールバックする必要があります。

MDN Web Docs は、必要なサイズまたは形式もリストしませんが、追加します：

  • sizes値は、アイコンの「スペースで区切られた次元のリスト」です

    • 例：「72x72 96x96」

  • type値はオプションですが、ユーザーエージェントがその使用に最も適切なアイコンを選択するのに役立ちます。

上記のルールを使用すると、アプリケーションは特定のアイコンの使用に関する条件を提供できます。たとえば、特定の解像度でPNGを強制し、指定されていないサイズでSVGにフォールバックし、ユーザーエージェントが最適な選択肢を選択できるようにします。このシステムの利点は、まだ発表されていないユーザーエージェントとの上位互換性です。

マニフェストアイコンの例：（上記のW3C仕様に基づく）

{
  "icons": [
    {
      "src": "assets/brand_small.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "icon/brand.ico",
      "sizes": "96x96 128x128 256x256"
    },
    {
      "src": "icon/brand_large.svg",
      "sizes": "257x257"
    }]
}
1
Dan Sorensen