How to Set up App-icons for Progressive Web Apps

Too long; Did not read:

App icons are important. Support the following sizes at the very minimum:

  • 16x16.png
  • 32x32.png
  • 48x48.png
  • 16x16.png
  • 128x128.png
  • 150x150.png
  • 180x180.png
  • 192x192.png
  • 512x512.png
  • favicon.ico (embedded 16x16, 32x32, 48x48)

Why are app-icons important?

An icon is a fundamental part of the digital presence & branding of whatever you are promoting. There is no excuse to not have a tailored icon for the experience you are building. Especially as Progressive Web Apps are becoming more and more intertwined with the wide variety of operating systems available.

My personal app-icon setup

For every project I make sure to add the following assets. I made an attempt to give the assets meaningful names so you can see at a glance which icons are used in different environments.

  • safari-pinned-tab.svg
  • mstile-150x150.png
  • favicon-48x48.png
  • favicon-32x32.png
  • favicon-16x16.png
  • apple-touch-icon.png (180x180)
  • android-chrome-512x512.png
  • android-chrome-192x192.png

Automation?

There are plenty of tools out there that generate favicons/app-icons for you. (I highly recommend Real Favicon Generator), but maybe you want to create some assets manually. I am especially talking about our smaller sized friends in our array of icons; The 16x16, 32x32, and 48x48px icons.

These icons need additional care because of the miniscule size of their artboards. Small imperfections such as subpixel-rendering are much more apparent here. Here is an example:

An icon with obvious subpixels.
A 16x16 icon scaled down directly from its 180x180 version.
A “pixel perfect” icon.
My attempt to make the same icon “pixel perfect”.

It goes without saying that the more pixels your icon contains, the less important these nitpicky issues will be.

Optimisation & Compression

After all your assets are done, its time for the most exciting part; optimising the shit out of them. We primarily do this for 2 reasons; firstly you save some bytes. Secondly, you save some bytes... again! —if you have a service-worker it is likely that it will cache all meta & manifest-related files. So it saves bytes even if a particular icon is not needed or requested immediately.

I personally like to use ImageAlpha & ImageOptim to compress imagery. Run them through there, and see the filesize drop by a significant amount.

If your favicons only include 1 or 2 colours, then you may want to consider converting them to base64 strings and put them immediately in the head of your document, this way you also save an extra network request.

As for the odd-one out, our SVG, we can compress that using SVGO through a CLI, or SVGOMG through a GUI.

.ico generation

Before I knew about the trick I am about to share with you, I had no idea how to properly create a .ico file, and I would quickly ask Google for help.

This always felt dodgy to me, as I do not know what metadata gets injected into my precious .ico file. Furthermore, you can embed several icon sizes into your .ico file, and most online generators seem to ignore this feature completely.

Fortunately for Mac users, you can do it easily from the CLI with 1 tiny (and extremely powerful) dependency! Here you go:

This dependency is ImageMagick, a reputable name in the scene. Not only does it allow you to create .ico files, but it also allows you to convert images to different file formats, such as WebP.

I recommend installing ImageMagick through Brew;

brew install imagemagick

Once that's set up we can create our favicon

convert favicon-16x16.png favicon-32x32.png favicon-48x48.png favicon.ico

This command will take your 16x16, 32x32, and 48x48 favicons, and encapsulate them inside an .ico file. By doing this you allow the browser to decide which icon is the most optimal to display based on the user's device & environment.

That's it. Your web-app will now look great in every modern browser, and will look beyond spectacular on your user's homescreen.

Pim de Wit