How to Set Up Your iPhone App Icon Using Cordova

By Thoriq Firdaus. in Mobile. Updated on June 5, 2024.

Note: Originally published on July 11, 2014.

An app’s icon not only sets it apart from the crowd but also forms the first impression for potential users. That’s why great care is often taken in designing an icon. In this guide, we’ll show you how to add a custom icon to your mobile app using Cordova, building on our previous discussion about mobile app development with Cordova.

Before diving in, you’ll need to prepare your icons. Here are some useful resources:

Creating Your Own Mobile App with Cordova

For many web developers, Cordova offers the quickest path to developing mobile apps. It lets you build applications... Read more

Apple’s Icon Requirements

Apple’s requirements for icons vary depending on the iOS version and device. Icons must fit various dialog screens, settings pages, and the main screen. Depending on your app’s targets, you might need multiple sizes.

Creating Your Icons

If you’re supporting iOS versions as old as 6.1, you’ll need to create up to 6 different icon sizes. This sounds daunting, but you can streamline the process using tools like AppIconTemplate. This Photoshop template includes a preset Photoshop Action to help design and generate all required icon sizes efficiently.

After downloading and using the template to create your icons in Photoshop, here’s an example of what they might look like:

Adding Icons to Your App

To incorporate the icons into your app, place them in the

/platforms/ios/{AppName}/Resources/icons

directory, created during the initial iOS platform setup in Cordova. Remember to rename the icons according to Apple’s naming standards (e.g., icon-[size]-[@2x] for Retina displays) before building the app in the iPhone Simulator to see your new icon in action.

Removing Glossy Icon Effect

To remove the default glossy effect that might obscure your icon’s details, modify the

{appname}-info.plist

file in Xcode. Set the Icon already includes gloss effects option to YES. Restart the app through Xcode to see the effect.

Conclusion

We’ve demonstrated how to add a custom icon to your app using Cordova. If your app is ready for launch, focus next on refining your icon to make it as appealing as possible.