Creating Cordova App Icon Sizes the Fast Way

Jay Rogers avatar
Jay Rogers August 31st, 2017

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).

You should now be able to run a cordova build and both platforms should build now.

If you enjoyed this article, please let me know by leaving a comment below or hitting me up on Twitter!

Support future content

The Ultimate Guide to Building APIs and Single-Page Applications with Laravel + VueJS + Capacitor book cover.

Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.

Written By Jay

Jay Rogers avatar Jay Rogers

Iā€™m a DevOps engineer who accidentally ended up in application & user-experience design. ?? I'm a husband and proud dog-dad who co-founded 521 Dimensions & Server Side Up. I like to having meaningful conversations with people who love building things. Please reach out and say hello!

Like this? Subscribe

We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.