Vue PWA manifest.jsonに書かれていないアイコン

vue add @vue/pwa
でVue製アプリをPWAにしてみた所、沢山の画像が生成されましたが、そのほとんどはmanifest.jsonで指定されていませんでした。（favicon.icoはindex.htmlで指定されていました）

いったいどこで指定されてどのように使われるのでしょうか？

ちなみに生成された画像↓
public/img/icons/android-chrome-192x192.png
public/img/icons/android-chrome-512x512.png
public/img/icons/apple-touch-icon-120x120.png
public/img/icons/apple-touch-icon-152x152.png
public/img/icons/apple-touch-icon-180x180.png
public/img/icons/apple-touch-icon-60x60.png
public/img/icons/apple-touch-icon-76x76.png
public/img/icons/apple-touch-icon.png
public/img/icons/favicon-16x16.png
public/img/icons/favicon-32x32.png
public/img/icons/msapplication-icon-144x144.png
public/img/icons/mstile-150x150.png
public/img/icons/safari-pinned-tab.svg

manifest.jsonのicons↓

json
1  "icons": [
2    {
3      "src": "./img/icons/android-chrome-192x192.png",
4      "sizes": "192x192",
5      "type": "image/png"
6    },
7    {
8      "src": "./img/icons/android-chrome-512x512.png",
9      "sizes": "512x512",
10      "type": "image/png"
11    }
12  ],

行動規範の内容に同意します

回答1件

ベストアンサー

apple-touch-iconはiOS Safariでmanifest.jsonに書かれていてもアイコンが適用されないバージョンがあるので、その対策と思います。
msapplication-iconは、Windowsにピン留めされるアイコンです。
PWAは出始めの技術かつ端末側の対応が必要なため、レガシー環境を考慮して画像が生成されるのだと思います。

投稿2019/02/13 00:22