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:
- 38 Beautiful IOS App Icon Designs For Your Inspiration
- Easily Generate Android Or IOS App Icons With MakeAppIcon
- 50 Awesome IOS Icon Designs
- 20 Flat Mobile Icons Designs
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.
How to Add iPhone App Icon With Cordova
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.