14 December 2023

How to Add an Icon to Your iPhone App Using Cordova

By Ronald Smith

When it comes to mobile apps, the icon is a crucial element that sets it apart from all the others. It’s also the first thing potential users notice about an app, making it essential to have a well-designed icon. In this post, I’ll show you how to add an icon to your app using Cordova.

Before we begin, we need to prepare the icons. Here are some resources that can help:

  • Get inspired by 38 beautiful iOS app icon designs
  • Easily generate Android or iOS app icons with MakeAppIcon
  • Explore 50 awesome iOS icon designs
  • Check out these 20 flat mobile icon designs

Requirements for Apple Icons

When it comes to creating icons for iOS apps, there are a few things to consider. First, the version of iOS you’re working with will have an impact on the size and pixels of the icons. Additionally, the screen the app will be displayed on and the number of icons required will also play a role.

Apple has specific requirements for different icon sizes to ensure they fit neatly into various iOS dialog screens. These screens include the settings page, Spotlight search page, and the main screen, among others.

It’s important to keep these specifications in mind as you create your icon.

I’m going to teach you how to create icons for iOS devices. Don’t worry if you’re new to this, I’ll guide you through each step. Let’s get started!

To begin, you’ll need to decide on the sizes and platforms you want to create icons for. The table below shows the sizes and compatible iOS versions for each platform. Take a look:

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

Now that you know the different sizes, let’s move on to creating the icons themselves. Follow the steps below:

1. Open your preferred image editing software.

2. Create a new document with the desired size for your icon.

3. Be sure to set the background to transparent if you want your icon to have a non-rectangular shape.

That’s it! You now have the knowledge to create your own icons for iOS devices. Have fun designing and customizing your apps!

If we want our app to work on iOS 6.1 and above, we’ll need to create six different sizes for the app icon. It may seem like a lot of work, but don’t worry! We have a solution for you: AppIconTemplate. This handy Photoshop template comes with a pre-made action that makes it easy to design and generate multiple icon sizes.

To get started, simply download the template and open it in Photoshop. Then, use the included action to generate all of your icon sizes. It’s that easy! Take a look at the icons we created using this method. Your designs will probably look even better!

How to Add an Icon to Your iPhone App Using Cordova

Putting the Icons in Place

In order to add the icons to our application, we need to move them to a specific location within our project. To do this, we’ll navigate to the /platforms/ios/Resources/icons directory. This directory was automatically created when we added the iOS platform to our project using the cordova platform command.

It’s important to note that Apple has a standardized naming convention for icons. To ensure our icons are in line with this convention, we should rename them accordingly. Refer to the screenshot above for an example of the proper naming format. Include the size of the icon and append “@2x” to indicate that it’s optimized for Retina displays.

Once our icons are properly named and in the correct location, we’re ready to build our app and see them in action. Simply click the play button, and the iPhone Simulator will launch, showcasing our newly added icons.

How to Add an Icon to Your iPhone App Using Cordova

Getting Rid of the Shiny Icon Look

Sometimes the shiny look that iOS gives to icons can make it hard to see the details. If you want to get rid of the shiny look, you can follow these steps:

First, open the -info.plist file in Xcode.

Next, you’ll want to find the option called Icon already includes gloss effects. Make sure you select YES for this option.

That’s it! Your icon will no longer have that glossy effect. Now you can see all the details clearly.

How to Add an Icon to Your iPhone App Using Cordova

If you want to remove the glossy effect from the app icon, you can do so by following these steps in Xcode.

  1. First, restart the app.
  2. Now, take a look at the icon below.
  3. You’ll notice that the glossy effect has been removed!

How to Add an Icon to Your iPhone App Using Cordova

Wrapping Up

Well, I’ve covered a lot of ground in this post! By now, you should have successfully added the icon to your app. Congratulations! This means we’re getting closer to the finish line of publishing your app. But before we get there, there’s an important step we can’t overlook – making sure your icon looks as attractive as possible.