Icon resizing for Cordova
02 Jan 2014Both 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 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.