生成プログレッシブウェブアプリの画像アイコンと、様々なサイズの要件

Question

私はcreate react appを使用することだし、それは公共のディレクトリで、次のmanifest.jsonをを生成します。

{ 
    "name": "React_Starter", 
    "short_name": "React_Starter", 
    "theme_color": "#1d9ed6", 
    "background_color": "#1d9ed6", 
    "display": "standalone", 
    "orientation": "portrait", 
    "Scope": "/", 
    "start_url": "/", 
    "icons": [ 
    { 
     "src": "/images/icons/android-chrome-72x72.png", 
     "sizes": "72x72", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-96x96.png", 
     "sizes": "96x96", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-144x144.png", 
     "sizes": "144x144", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-192x192.png", 
     "sizes": "192x192", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-256x256.png", 
     "sizes": "256x256", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-384x384.png", 
     "sizes": "384x384", 
     "type": "image/png" 
    }, 
    { 
     "src": "/images/icons/android-chrome-512x512.png", 
     "sizes": "512x512", 
     "type": "image/png" 
    } 
    ], 
    "splash_pages": null, 
} 

これらの画像は、生産プログレッシブWebアプリケーション（のために十分に良いサイズですPWA）？もっとサイズを入れるべきですか？

また、あなたはあなたができる、異なるサイズのアイコンの多くを生成する場合、私はlogo.png与えられたPWAイメージアイコンを生成し、ビルドディレクトリ

Answer 1

に保存することejectingなしcreate react appで使用できるツールがありますこれを使用してください：https://realfavicongenerator.net

Answer 2

私はあなたがそのリストのアイコンサイズのまともな量を持っていると思う！

Google Developersウェブサイトによると、ベースラインのアイコンサイズは48x48, 196x196, 128x128, 144x144, 152x152です。

サイトから：

ホーム画面にアイコンを保存し、Chromeは最初の表示の密度に合わせて、画面に 密度を48dpするような大きさのアイコン を探します。いずれも見つからなければ、最も近いアイコン がデバイス特性と一致するものを検索します。何らかの理由で に特定のピクセル密度でアイコンをターゲットにすることを指定したい場合は、 には任意の密度のメンバーを使用できます。 密度を宣言しないと、デフォルトは1.0になります。これは、「画面の濃度1.0とそれ以上のためにこのアイコン を使用してください」という意味です。これは通常あなたが望むものです。

さらに多くのアイコンサイズを追加してもかまいませんが、最終的には、アイコンサイズのリストがあれば、Chromeがこれを処理します。

マニフェストファイルが有効である限り、あなたは良いと思う。 W3C仕様のルールに従ったManifest Validatorを試しましたか？