Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which icon sizes are required for progressive web apps (PWA) as of Q1 2018?

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.

like image 689
Dan Sorensen Avatar asked Feb 17 '18 08:02

Dan Sorensen


People also ask

What is PWA icon?

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.

What is Apple touch icon in PWA?

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.


2 Answers

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

like image 141
yaircarreno Avatar answered Oct 13 '22 00:10

yaircarreno


As per Google Developers

icons must include a 192px and a 512px sized icons

Here is our blog on the same.

like image 43
Tanmay Avatar answered Oct 13 '22 00:10

Tanmay