Easily Create a Baseline Set of Progressive Web App Icons

Chris Love

Last Updated - Sat Jan 09 2021

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.

Windows Icon Design Guidelines

The best guideline to follow on Windows is what is required is theWindows Tile and Assets Guidelines. Windows is different from iOS and Android because the start menu uses Live Tiles.

Live Tiles come in different sizes, square and rectangle. There are small, medium, wide, large, app list and splash screenimages your icon could potentially use.

The guidelines go into details about screen pixel densities and how your icons can scale. This can be very confusing if youtry to convert all the potential densities to actual pixel dimensions.

The best idea is to distill the requirements into a common baseline of image dimensions your PWA needs. In fact, you cancover the baseline with a set of 7 icons combined with the Android and iOS baseline icons.

The Windows specific icons you need:

24x24 48x48 50x50 88x88 300x300 620x300 1240x600

The first six icons are used for live tiles. The last is used for an application splash screen.

For now, these icons will only be applied to live tiles if your progressive web application is installed via the WindowsStore. Hopefully in the future you can ‘add to the start menu’ or home screen on Windows from Edge in the future.

Android

Similar to the Windows design guidelines, thematerial design guidelines sort of obfuscates the needed sizes behind pixel densities and scaling factors.

Don’t worry I have you covered.

36x36 48x48 72x72 96x96 144x144 192x192

These dimensions cover the icons. The reason why there are so many dimensions is there are many different screen sizes andpixel densities your PWA might be installed.

The folks at Google have done the rocket science and determined the optimize baseline set of icons. The platform will scalethe icons to fit the platform densities without causing them to pixilate or become blurry.

There is one more image you need to cover the Android platform requirements, 512x512. This is used for the application splashscreen.

The image should be at least 512x512. As you already saw in Windows there is a large image included in its baseline set.As you are about to see there is a 1024x1024 image for iOS that will be used by the Android platform.

iOS

The last platform is iOS, comprised of iPhones, iPads, iPad Mini and iPad Pro. Again, there are different screen pixel densitiesand dimensions to consider.

Apple may not support progressive web apps yet, but they have always supported touch icons for web apps. Remember, web appswere the recommended way to create apps for the iPhone when it was first released.

They never let the touch icon capability die. They just have not improved it that much.

Like Windows and Android there is a baseline set of icons to cover the iOS platforms.

120x120 152x152 167x167 180x180

The one you must include is the 180x180 because it covers the most currentiOS guidelines. The other sizes account for previous versions of iOS.

The last image is the 1024x1024 I mentioned in the Android section. This is used for the Apple App Store.

Why should you care about the Apple App Store in your progressive web app?

Honestly, I don’t know. I mean Apple has not exactly embraced progressive web apps. But you should always prepare, just incase. Microsoft is ingesting PWAs in their store, so who knows.

Either way, the large square image should always be handy because it can be scaled down by the platform.

Art Direction

Because there are icons of different sizes and uses you may want to use some art direction when defining your icon images.

What is art direction?

This is where you don’t rely on simply scaling an image, but you step in with special cropping or completely different applicationof the photo or illustration. The concept works great with responsive images, but can also be handy for your applicationicons.

In myFast Furniture demo site I use two styles of logos in the icons. For smaller icons the double F square is used. Asthe dimensions increase I add the Fast Furniture text below the square.

Depending on your branding requirements you can use different versions of your logo in the PWA icons.

Simplifying the Image Creation Process

Creating a set of progressive web application icons can be a painful, tedious process. If there was only a web manifest icon generator. Creating a set of progressive web app icons is a job for automation.

The best tool I have found isPWABuilder.com, a tool hosted and maintained by the Microsoft Edge team. It can be used online or via a command lineinterface.

PWABuilder will walk you through the steps to create a valid web manifest file, and help you create native applications ofyour PWA for Windows, Android and iOS.

For your icon needs it lets you upload a large image it uses to create a baseline set of progressive web app icons.

When you need to utilize art direction you can just run through twice, or more if needed, to create the images you need.I ran the two different fast furniture logos through the process to get set I could use.

If you do employ art direction be sure to update your manifest file to use the versions you want.

Summary

Having a complete set of icons means your progressive web application will work on every platform, even if they don’t fullysupport the PWA add to home screen experience.

Because each platform has its own design guidelines there is a large array of icons and images you should include.

You have learned what image sizes will serve as your baseline, for now. As platforms mature these guidelines will too.

Be sure to use an automated tool like PWABuilder to make your life easier. Also don’t forget to use art direction to makesure your brand is represented across the different platforms and device sizes.

Do you want a much more detailed set of progressive web app and service worker tutorials? I just launched a new course, Progressive Web Apps : From Beginner to Expert.

This course covers everything you need to know to make any website a progressive web application. There are beginner topics to help anyone get started with progressive web app and service worker development. There are also modules to teach you how to polyfil many modern PWA features like offline and add to homescreen tactics.

Enroll today and save $171 off the $200 price. Progressive Web Apps : From Beginner to Expert is only $29 for a limited time.