How can I change the default icon of cordova/phone

Question

I developed a web application html5, javascript, jquery and ajax. The directory structure of my HelloWorld project is

HelloWorld
   img
   css
   js
   index.html

I zipped the HelloWorld folder and uploaded the zip file to http://build.phonegap.com for creating the apk file. I installed the app in mobile and it is working fine.

The problem is how to change the default icon of my app which is assigned by Cordova or phonegap during build. I searched a lot but nearly all the answers available show the process of changing the icon when the app is compiled and build locally (from platform folder)

Since I am using online or remote service I cant use them. I want to know where I put my own icon.png or logo.png so that it is used as the application icon during build process. Please let me know if any code is also required along with the icon.

Answer 1

Okay I figured it out and I am posting the answer to help others. You need to add config.xml file and icons in png format. Name the icons ldpi.png (36x36), mdpi.png (46x46), hdpi.png (72x72), xdhpi.png (96x96) and icon.png (96x96). You can use http://picresize.com/ to convert icons in the specified pixel size by choosing the custom size from the option on the website. Add the following code in to the config.xml. So the final folder/file structure will be

ProjectName
  img
  css
  js
  index.html
  config.xml
  ldpi.png
  mdpi.png
  hdpi.png
  xdhpi.png
  icon.png

Now zip the folder and upload it to http://build.phonegap.com and the apk created will have the user defined icons.

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.phonegap.bdau"
    versionCode = "10" 
    version     = "1.0.0" >

<!-- versionCode is optional and Android only -->

<name>BigDataAnalyticalUnit</name>

<description>
    Big Data and Analytical Unit 
</description>

<author href="https://imperial.ac.uk" email="[e-mail]">
    Mian Asbat Ahmad
</author>



    <!-- Define app icon for each platform. -->
    <icon src="icon.png" />
    <icon src="ldpi.png" gap:platform="android" gap:qualifier="ldpi" />
    <icon src="mdpi.png" gap:platform="android" gap:qualifier="mdpi" />
    <icon src="hdpi.png" gap:platform="android" gap:qualifier="hdpi" />
    <icon src="xhdpi.png" gap:platform="android" gap:qualifier="xhdpi" />
    </widget>