docs: explain pwa head/manifest icons

[DRBragg]

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Underlying tools
• Other, please describe:

Does this PR introduce a breaking change? (check one)

• Yes
• No

Other information:

Closes #5407

[DRBragg]

I'm not really sure what's causing the AppVeyor failure.
Disregard, just saw the message.

AppVeyor Message:
Build execution time has reached the maximum allowed time for your plan (60 minutes).

So not a problem with this PR. Is there anything I need to do on my end?

[Alex-Sokolov]

It's removed in 4.4.0? 6323b73#diff-122632498f7fe7afa2fc01595a67e13c

[LinusBorg]

/cc @sodatea

[sodatea]

That commit was generated by lerna. Really unexpected that it would ever change code other than the version numbers and changelog.

[SimonChaumet]

It was removed again ?

[sodatea]

Added back. Still confused 😕

[DRBragg]

Seems to be live now (finally 😂) 👍

[IsaacCespedes]

I am trying to see the new icon for my homescreen app and it does not change unless I reinstall. Am I missing something? Thank you.

Update: My apologies...I was unaware I had to wait 24 hours on Android. Still need to test that.
https://web.dev/manifest-updates/

This is my vue.config:
pwa: {
name: "MyApp",
themeColor: "#000000",
msTileColor: "#000000",
appleMobileWebAppCapable: "yes",
appleMobileWebAppStatusBarStyle: "black",
assetsVersion: "1.2",
iconPaths: {
favicon32: "img/icons2/favicon-32x32.png",
favicon16: "img/icons2/favicon-16x16.png",
appleTouchIcon: "img/icons2/apple-touch-icon-152x152.png",
maskIcon: "img/icons2/safari-pinned-tab.svg",
msTileImage: "img/icons2/msapplication-icon-144x144.png",
},
manifestOptions: {
icons: [
{
src: "./img/icons2/android-chrome-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-maskable-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "./img/icons2/android-chrome-maskable-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-60x60.png",
sizes: "60x60",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-76x76.png",
sizes: "76x76",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-120x120.png",
sizes: "120x120",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-152x152.png",
sizes: "152x152",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon-180x180.png",
sizes: "180x180",
type: "image/png",
},
{
src: "./img/icons2/apple-touch-icon.png",
sizes: "180x180",
type: "image/png",
},
{
src: "./img/icons2/msapplication-icon-144x144.png",
sizes: "144x144",
type: "image/png",
},
{
src: "./img/icons2/mstile-150x150.png",
sizes: "150x150",
type: "image/png",
},
],
},