How to Add iPhone App Icon With Cordova

By Thoriq Firdaus. in Mobile. Updated on December 31, 2014.

For a mobile app the icon is an integral part of an app that separates it from the rest of the crowd. It is also the first thing about an app that potential users will see — which is why many designers put so much thought into icon design. In this post, following our discussion on building a mobile app with Cordova, we will show you how to add an icon for your app.

Before we start though, we need to prepare the icons first. Here are a few resources that can be helpful:

Recommended Reading: Building Your Own Mobile App With Cordova

Apple Icon Requirement

Depending on a few factors such as the iOS version, the screen the app will be on, the number of icons required, the size and the pixels may greatly differ. Apple requires many different icon sizes to fit into iOS dialog screens in the settings page, the Spotlight search page, the main screen and so on.

You will need to take these specs into consideration when creating your icon.

Size/Platforms	iOS 6.0 / 6.1	iOS 7.0 / 7.1
120×120	✔	✔
114×114	✔
80×80	✔	✔
58×58	✔	✔
57×57	✔
29×29	✔

Creating the Icons

Assuming that our application should support down to iOS 6.1 we would need 6 sizes for the icon. Seems a lot of work, huh? Well, not to worry, as you can use AppIconTemplate. AppIconTemplate is a Photoshop template and comes with a preset Photoshop Action that would streamline the workflow when desigining and generating multiple icon sizes.

Download and use the template in Photoshop, and generate the icon with the Photoshop Action. As an example, here are the icons that we have generated with it. Your icon design would probably look a lot nicer.

Adding the Icons to the Application

To add the icons, move them to the /platforms/ios/{AppName}/Resources/icons, which was created when we previously added the iOS platform to the project with the cordova platform command.

Furthermore, it is better to rename the icons in accordance to Apple’s standard naming convention as shown in the above screenshot: icon-[size]-[@2x]. @2x suffix is used to address Retina display. Once the icons are ready, click the play button to build the app and show it in the iPhone Simulator. And you should see your new icon, like so.

Removing the Icon Glossy Effect

Sometimes the glossy effect that iOS gives to the icon could obstruct icon details. If you want to remove the glossy effect, open the {appname}-info.plist file in Xcode. Then, select YES for Icon already includes gloss effects option, as shown in the following screenshot.

Through Xcode, restart the app. Now, as you can see below, you should find the icon is shown without the glossy effect.

Conclusion

In this post, we have added the icon to our app. Assuming that you have built the app functionality, we are now one step closer to publishing the app. The thing that you need to do now is to make your icon as appealing as possible.