Add App Icon To Phonegap Build Apps

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

In this post, we will take a look at how you can add app icons to your PhoneGap build apps. We won’t be needing any plugins for this to work. First of all, we need to create the images that we will use as the icon for our app.

I leave it to you to create images as that’s not the point of this tutorial. Keep in mind that icon images are always square, i.e, they have the same width as the height. Icon images remain the same even if the orientation of the device is changed which is not true for splash screen images as we saw in the previous tutorial we needed to create splash images that support landscape as well as portrait orientations.

This tutorial is a part of my Free PhoneGap Build Tutorial Course here.

There are two approaches that you can take to add icons to apps

Approach 1

You can just add a default icon image that will be shown for all platforms and all screen resolutions. This approach is by far the easiest approach and has worked for me so far without any issues in the apps that I have published. The reason that I like this approach is because that you will only have one icon image file to create, also this will reduce the overall app size as you are using only one image file. We will see how you can use multiple files in Approach-2 later in this post.

Step-1

Make sure that you have created the icon image file with the png file format, the dimensions of the image should be 192 x 192 pixels. You can increase the dimensions if you find the icon appears to be blurry or pixelated while testing.

Step-2

After creating the icon image make sure to place it in the root of the www folder and it must be named as icon.png

Step-3

Now we need to reference the icon.png image inside our config.xml file, we can do that as follows.

And that is it! You are done. This technically should pull the icon.png file for all platforms and all screen resolutions. I have used this approach and it has worked for me without any issues.

If you do run into some issues or you want to have that bit of extra control over individual platforms and screen resolutions then you should take the approach 2.

 

Approach 2

Before we go in-depth into setting icon images for different platforms and screen resolutions I want to mention that setting a default icon as shown in Approach-1 is compulsory. Each app must have a default icon.png image placed at the root of the www folder. With that said let’s now go ahead and set app icons for individual platforms for various screen sizes.

For Android

Depending upon how man screen resolutions you wish to target you will need to create icon image files for all those resolutions. Each image file needs to be of specific dimension, take a look at the list given below for more information

  •             ldpi    : 36×36 px
  •             mdpi    : 48×48 px
  •             hdpi    : 72×72 px
  •             xhdpi   : 96×96 px
  •             xxhdpi  : 144×144 px
  •             xxxhdpi : 192×192 px

So to target ldpi screen size you will need to create icon image of 36 x 36 px and so on. Assuming that you have created all the relevant images, you will need to include the images inside of the app’s www folder. Note here that you are not required to place the image in the root of the www folder, that was only necessary for the default icon image. Here we have the liberty to nest the image files inside any folder that we create.

So let’s say that for Android we have all the images inside of www/res/android/icon/ folder.

Moving on, now we need to add references to the config.xml file for each image. We can do that as follows

Make sure that you associate the density attribute value with the appropriate image file correctly.

 

For iOS

iOS has various icon sizes that it supports for iPhone, iPad and iPod for it’s retina display. Here is a list of image sizes that are supported in iOS devices

  • iOS 8
    • iPhoneg 6 plus
      • 180 x 180
  • iOS 7
    • iPhone And iPod Touch
      • 60 x 60
      • 120 x 120
    • iPad
      • 76 x 76
      • 152 x152
  • iOS 6.1
    • Spotlight Icon
      • 40 x 40
      • 80 x 80
    • iPhone And iPod Touch
      • 57 x 57
      • 114 x 114
    • iPad
      • 72 x 72
      • 144 x 144
    • iPhone spotlight and setting icon
      • 29 x 29
      • 58 x 58
    • iPadiPhone spotlight and setting icon
      • 50 x 50
      • 100 x 100

 

So assuming that you have created and stored the various image files inside of www/res/ios/icon folder we can add the following to our config.xml file

Note that the above code is taken from the PhoneGap Build documentation here.

 

For Windows

As of the time this article is written PhoneGap build supports Windows Phone 8 and Windows Phone 8.1+.

For Windows Phone 8 there are two icons that need to be added, the regular app icon and a title image. They can be added as follows

<platform name=“winphone”>

<platform name=“winphone”>
For windows 8.1 and above we will have the same approach as we have seen so far, i.e, creating icon images of different sizes and then referencing them in the config.xml file as follows
Note that the above code is taken from the PhoneGap Build documentation here.

 

Conclusion

In the apps that I have created so far, I have had no issues with setting just the default icon image shown in Approach-1.

I did however for testing, tried to add icons for different screen resolutions and a few platform versions for testing and that worked fine as well. So at the end setting app icons for different platforms and resolution depends on the different platforms that you wish to support along with the time and effort that you want to put behind it. For me, I would just set one default app icon and test

So at the end setting app icons for different platforms and resolution depends on the different platforms that you wish to support along with the time and effort that you want to put behind it. For me I would just set one default app icon and test it in my target platform, version and screen size, if that does not work then I would bother setting specific app icons.

 

Watch Video Tutorial Here:

Full Course Curriculum : Click here

 

Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @pointDeveloper

Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)

%d bloggers like this: