PWA Icons and Ionic Resources

Ionic’s support for Progressive Web Apps (PWAs) continues to improve. Currently, there is one small hiccup in the workflow, the generation of icons. When you run

$ ng add @angular/pwa

a manifest.json file is automatically generated and a set of icons added to the src/assets/icon directory. If you have been using Ionic to generate native mobile apps, then you are probably familiar with this command:

$ ionic cordova resouces

This CLI task will generate a collection of icons that need to be included. Unfortunately, it currently does not generate all the sizes that are referenced in the manifest.json file. To save a little time here is a handy table of the icons a PWA should have and the corresponding icon from Cordova.

PWA Cordova
icon-72×72.png drawable-hdpi-icon.png
icon-96×96.png drawable-xhdpi-icon.png
icon-128×128.png
icon-144×144.png drawable-xxhdpi-icon.png
icon-152×152.png icon-76@2x.png
icon-192×192.png drawable-xxxhdpi-icon.png
icon-384×384.png
icon-512×512.png

You will need to generate three icons to have a complete. There is a 1024×102 icon available that can be downsized quickly.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.