アイコンとマニフェスト.json

Question

manifest.jsonのアイコンの取り扱いに関する推奨事項は何ですか？

これが見つかりましたwebpack plugin that generates icons。それは37のアイコンと対応するhtmlタグを生成しました。最適な結果を得るために

<meta name="mobile-web-app-capable" content="yes"> 
<meta name="theme-color" content="#fff"> 
<meta name="application-name" content="graff"> 
<link rel="apple-touch-icon" sizes="57x57" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-57x57.png"> 
<link rel="apple-touch-icon" sizes="60x60" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-60x60.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="76x76" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-76x76.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-114x114.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-120x120.png"> 
<link rel="apple-touch-icon" sizes="144x144" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-144x144.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-152x152.png"> 
<link rel="apple-touch-icon" sizes="180x180" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-icon-180x180.png"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> 
<meta name="apple-mobile-web-app-title" content="@dasnoo/graffity-inferno"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-320x460.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x920.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-640x1096.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-750x1294.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1182x2208.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1242x2148.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-748x1024.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-768x1004.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1496x2048.png"> 
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/apple-touch-startup-image-1536x2008.png"> 
<link rel="icon" type="image/png" sizes="32x32" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-32x32.png"> 
<link rel="icon" type="image/png" sizes="16x16" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon-16x16.png"> 
<link rel="shortcut icon" href="icons-ce3ab881bd31f1efc59c9c227d8f6b7f/favicon.ico"> 

、私は私のmanifest.jsonをと HTMLのMETAタグにアイコンを置く必要がありますか？ 私はそれがより多くのモバイルサポートだと思いますが、3つのアイコンが効果的に何も達成していないブラウザの95％を処理するならば、私は持っていなかっただろう37のアイコンを達成するだろうか？お勧めのものは何ですか？

これはサービスワーカー向けです。

Answer 1

これらのアイコンのそれぞれは、異なるデバイス用であり、しばしば異なるバージョンのデバイス用です。しかし、実際には37を必要としません.37を得るには、1％未満の市場シェアを持つデバイス用の完璧なピクセルアイコンを生成します。あなたはそれらに最も近いマッチを提供することができ、ほとんど誰も気づかないでしょう。私はブラウザの関連するアイコンをHTMLメタタグに入れ、マニフェスト内の関連するアイコンを描く傾向があります。ここでは、このすべてについて

良いポスト：ベースライン時https://realfavicongenerator.net/blog/new-favicon-package-less-is-more/

Answer 2

は、あなたは以下のマニフェストの構造を次のようする必要があります。詳細はlinkにあります。 PWAに対してLighthouseを実行すると、512ピクセルのサイズの別のアイコンが要求されます。

{ 
    "name": "HackerWeb", 
    "short_name": "HackerWeb", 
    "start_url": ".", 
    "display": "standalone", 
    "background_color": "#fff", 
    "description": "A simply readable Hacker News app.", 
    "icons": [ 
     { 
      "src": "images/touch/homescreen48.png", 
      "sizes": "48x48", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen72.png", 
      "sizes": "72x72", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen96.png", 
      "sizes": "96x96", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen144.png", 
      "sizes": "144x144", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen168.png", 
      "sizes": "168x168", 
      "type": "image/png" 
     }, 
     { 
      "src": "images/touch/homescreen192.png", 
      "sizes": "192x192", 
      "type": "image/png" 
     } 
    ], 
    "related_applications": [ 
     { 
      "platform": "web" 
     }, 
     { 
      "platform": "play", 
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" 
     } 
    ] 
}