Which application icons and sizes are required for a progressive web app (PWA)? For example, should I include Apple icons if Safari doesn't support PWAs?
It seems like a common need among developers, but at this time, I am not certain if there is an official spec or guidance for it.
With the advent of PWA (Progressive Web Apps), the icons are configurable in a web manifest file. Progressive Web Apps allow web applications to be installed on a device. You can create a shortcut on the mobile home screen. Tap open the icon to launch the application in its own window.
The icon that appears on the iOS home screen when a PWA is added is called the Apple touch icon. This codelab shows you how to add an Apple touch icon to a PWA. It assumes that you have access to an iOS device. iOS Safari users can add any webpage to their home screen.
If you want to include a complete set of icons for Android:
icon-72x72
icon-96x96
icon-128x128
icon-144x144
icon-152x152
icon-192x192
icon-384x384
icon-512x512
There is some helpful tools like https://app-manifest.firebaseapp.com/, to create icons.
For iOS, you will need:
icon-120x120
icon-180x180
With square background (can't be transparent background). A good repository for references at https://github.com/gokulkrishh/awesome-meta-and-manifest
As per Google Developers
icons must include a 192px and a 512px sized icons
Here is our blog on the same.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With