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

pwa icon generator
web app icon
web app manifest does not meet the installability requirements
pwa splash screen
android chrome icon size
pwa icon not showing
pwa full screen
pwa splash screen animation

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.

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

Easily Create A Baseline Set Of Progressive Web App Icons, create-baseline-pwa-icon-set What are the proper add to home screen icon sizes? A progressive web application's icons are used by each platform when The best guideline to follow on Windows is what is required is  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.

As per Google Developers

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

Here is our blog on the same.

Designing a Progressive Web App icon - Dev Channel, The ability to add web apps to the home screen has existed for quite some time but have different requirements so we must create an icon that is flexible. It must work at different sizes for different devices. The easiest way to do this is create a fake PWA App, in other words a Nov 5, 2018 · 7 min read  Quick Start PWA on Website This quick start walks you through the steps to create a Progressive Web App (PWA) from scratch using the pwabuilder.com builder site. Make sure your website meets the minimum requirements. The first step is to build the Manifest for your application using the pwabuilder.com web site.

22 PWA Interview Questions Every Developer Should Know (2020 , The concept of the progressive web app (PWA) was approached by Google in to represent the app on a mobile OS (for example, as the home screen icon), and a Faster: The progressive web apps are much smaller in size than native apps. No Updates Required: Most of the mobile apps need regular weekly updates. By implication, this means that progressive web apps require service workers. Reference a web app manifest with at least the four key properties: name, short_name, start_url, and display (with a value of standalone or fullscreen) An icon at least 144×144 large in PNG format.

Too many icons · Issue #587 · w3c/manifest · GitHub, For example, I use 512x512 px icon for my webapp Photopea: /which-icon-​sizes-are-required-for-progressive-web-apps-pwa-as-of-q1-2018. Progressive Web Apps (PWAs) are gaining more and more popularity in these days. Maybe you’ve already used a PWA without knowing because many big websites have already enhanced their platforms with PWA features. A Progressive Web App is a web application which makes use of latest web technologies to make a web application act and feel like an app. This is achieved by making use of web app

Manifest Contains Icons at Least 192px, That icon is specified in the icons array of the Web App Manifest. Other operating systems may require a different icon size for optimal  It’s 2018 and the mobile web is quickly improving with new Progressive Web Apps (PWA) going live every day. Pinterest, Starbucks, Tinder, The Weather Channel, and Twitterlight all launched PWAs in the past six months. The PWA landscape across ecommerce has also changed drastically just over the last year.

Chrome Apps are dead, as Google shuts down the Chrome Web , Google says it is "roughly targeting mid-2018" for PWA desktop apps. There's still no word on removing Chrome Apps from Chrome OS, though. If  A PWA is made up of service workers, which can run in the background. To avoid tampering with service workers the specification of PWA requires it to be hosted over HTTPS.

Comments
  • Cool, https://app-manifest.firebaseapp.com/ help me to generate different icon sizes. Now, my question is; should I need to make different icons with generated sizes or the icon with 512x512 size will work for all other generated sizes ?
  • It is usually a good practice to have multiple dimensions, so I recommend you to use several dimensions.
  • Actually this incorrect in practice. Chrome/Lighthouse will complain about a missing icon. You should add more sizes to the SVG file (at least 512x512 in above case).
  • While, true, do they have the additional sizes documented? I just quoted the spec.
  • Not on W3C page, no. But docs by Google suggest otherwise... Also note that it might be a bug in Lighthouse (or Chrome). Which I reported here: github.com/GoogleChrome/lighthouse/issues/4883
  • just curious, in your example, would brand.ico be a specific size? It seems that what the "sizes" attribute is actually specifying is the aspect ratio? So, if that's the case, why isn't the property/attribute called "aspect-ratio"?
  • No, *.ico files can have multiple images embedded in them. In the above case icon/brand.ico includes three different images with three different sizes.