Creating Cordova App Icon Sizes the Fast Way

Building a hybrid mobile app can save you a ton of time. But when it comes to making your icons pixel perfect, it is overwhelming with the amount of Cordova app icon sizes that are required to build for each platform. Luckily, there are tools that can help you make this process a lot less painful for you.

What we're going to achieve today is building a file that will create all of the icons needed for us. If I need to update the icons in the future, all I need to do is update one design and it will update the rest of the sizes for me. For this example, I am going to design for two platforms: Android and iOS.

We can do all of this with Sketch

Sketch is a design application similar to Adobe Photoshop. If you haven't heard of this before, it's been quite the tool to use amongst the most talented designers. The price is $99/year, but they also have a free trial. It's built for Mac OS X only, but it's totally worth the investment if you are doing UI design often. The product is built all around User Interface design (unlike Adobe Photoshop which is geared towards Photographers and static Graphic Designers). Everything you create is in a "vector" format so it makes it easy for your design to scale with all of the crazy pixel densities out there.

Step 1: Cheat and download my template

Once you have Sketch installed, I made it really easy for you to do make your icons. Download my template and open it in Sketch.

Step 2: Create your iOS icon

You should be able to toggle the guides on and off. Align everything perfectly and keep your design within the guides. The following abides to Apple's App Icon Guidelines.

Step 3: Create your Android icon

Android has it's own set of guidelines. Same as before, keep your design within the guides. I made it all nice and cute for the Android Oreo circular pattern.

Step 4: Let the magic happen

This is where Sketch becomes really powerful. All you need to do now is hit Export in the upper right. Make sure you set the guides to HIDDEN (otherwise they will appear in your exported icon). Then choose the folder of your Cordova project where you want them placed.

The magic is all happening within the file that I gave you. Sketch allows us to export specific widths.

Step 5: Update your config.xml

Once you have the images exported into your project folder, all you will need to do is update your /config.xml in your Cordova Project to be able to access your images. The Cordova App Icon Sizes can be found in their documentation for every file size you need (incase you need to add other platforms).