To be an official progressive web application you must use HTTPS, register a service worker and have a valid web manifest. Failure to have at least a 192x912 PNG icon could be why Chrome’s ‘add to home screen’ prompt is not working. Part of the web manifest file is to define what icons are available.

But what size icons should you create? What are the proper add to home screen icon sizes?

A progressive web application’s icons are used by each platform when your app is ‘installed’. Generally they are used asthe home screen icons, but can also be used for a splash screen or even the hero image in the Apple app store.

Wait did I just say Apple app store? More on that later.

A complete baseline set of progressive web app icons includes 17 different images. That can be a big time suck if you wantto create them by hand.

Don’t worry at the end of the article I will show you how to cheat and automate so you can make sure you don’t miss any.

The reality is there are 3 major operating systems you should cover. The browser platform is not the controlling factor,it is the operating system. And more to the point it is the platform’s design guidelines. Each platform’s design guidelinesare there to ensure a common level of quality and user expectations.

You may be asking, why use the platform application guidelines, aren’t we building PWAs?

If you have not noticed progressive web apps are being elevated by both Windows and Google to be equal to their native apps.This means they need a matching set of icons.

#pwa #web-development