Icon resizing for Cordova

Both the iOS and Android platforms require multiple versions of icon sizes to be provided. If you need to change the icon at some point you have to regenerate all the icons again. This can be automated using ImageMagick which can resize and create images with the command line.

cordova-icon

cordova-icon is a simple script that takes an icon.png file from the root of your cordova project and automatically generates icons with the right sizes for all the platforms that have been added.

Install cordova icon using npm

 $ npm install cordova-icon -g

ImageMagick is required, if you're on a Mac install it with:

$ brew install imagemagick

Create a new cordova project:

 $ cordova create hello com.example.hello HelloWorld

Go into the cordova project's folder and add the platforms you'll be using:

 $ cd hello
 $ cordova platform add ios
 $ cordova platform add android

Save an icon.png file to this folder (I use the iTunes icon which is 1024x1024) and run:

$ cordova-icon

All the icons will be generated for you in the right paths to replace the cordova icon placeholders.

I also add cordova-icon as a hook to the cordova-cli so every time I run the cordova build the icons are regenerated for me. When I want to update an icon I replace the icon.png file, run the build and all the icons are updated for all the platforms I have. (see instructions to set up the hook in the repo)

I hope you find it useful as well. Let me know if you have other productivity tips for working with cordova.

Follow me for updates on similar new posts I write or tweet about this post.