What are the recommendation on how to deal with icons in manifest.json?
I found this webpack plugin that generates icons. It generated 37 icons and the corresponding html tags.
<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>
For optimal results, should I put the icons in my manifest.json and html meta tags ?
what would having 37 icons achieve that I wouldn't have with say 10 icons (I assume it's more mobile support, but if 3 icons handle 95% of browsers it effectively achieve nothing)? What are the recommended ones ?
This is for a service worker.