GridTips: How to Add iPhone App Icon With Cordova

sexta-feira, 11 de julho de 2014

How to Add iPhone App Icon With Cordova

For a mobile app a idol is an constituent partial of an app that separates it from a rest of a crowd. It is also a initial thing about an app that intensity users will see — that is because many designers put so most suspicion into idol design. In this post, following a contention on building a mobile app with Cordova, we will uncover we how to supplement an idol for your app.

Before we start though, we need to prepared a 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 a iOS version, a shade a app will be on, a series of icons required, a distance and a pixels competence severely differ. Apple requires many opposite idol sizes to fit into iOS dialog screens in a settings page, a Spotlight hunt page, a categorical shade and so on.

You will need to take these specs into care when formulating your icon.

Creating a Icons

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

Download and use a template in Photoshop, and beget a idol with a Photoshop Action. As an example, here are a icons that we have generated with it. Your idol pattern would substantially demeanour a lot nicer.

Adding a Icons to a Application

To supplement a icons, pierce them to a /platforms/ios/AppName/Resources/icons, that was combined when we formerly combined a iOS height to a plan with a cordova platform command.

Furthermore, it is improved to rename a icons in suitability to Apple’s customary fixing gathering as shown in a above screenshot: icon-[size]-[@2x]. @2x appendix is used to residence Retina display. Once a icons are ready, click a play symbol to build a app and uncover it in a iPhone Simulator. And we should see your new icon, like so.

Removing a Icon Glossy Effect

Sometimes a silken outcome that iOS gives to a idol could hinder idol details. If we wish to mislay a silken effect, open a appname-info.plist record in Xcode. Then, name YES for Icon already includes shimmer effects option, as shown in a following screenshot.

Through Xcode, restart a app. Now, as we can see below, we should find a idol is shown but a silken effect.

Conclusion

In this post, we have combined a idol to a app. Assuming that we have built a app functionality, we are now one step closer to edition a app. The thing that we need to do now is to make your idol as appealing as possible.

<!–