Generating iOS and Android icons in Cordova / PhoneGap

Question

I have a freshly created Cordova project with the following config.xml setup (used the instructions from http://docs.phonegap.com/en/edge/config_ref_images.md.h

Answer 1

A little explication for people who say <icon src="res/icon.png" /> Not work !

You must put icon.png in both this folders

project_name/res/

and

project_name/platforms/platform_name/res/

Steps:

cordova create hello com.example.hello HelloWorld
cd hello

Copy your icon.png to project_name/res/ Open config.xml and put <icon src="res/icon.png" />

After that run

cordova platform add android

Now copy your icon.png to ... hello/platforms/android/res/

then

cordova build android

and finally

adb install  platforms/android/build/outputs/apk/android-debug.apk

After that you can see on device your app with your icon

Answer 2

The config.xml settings for icons only works with the PhoneGap Build service. After adding both of your platforms you need to manually (or you can create a hook, but I haven't done that myself) place your icons in the correct paths.

For iOS:

PROJECT_PATH/platforms/ios/PROJECT_NAME/Resources/icons

For Android:

PROJECT_PATH/platforms/android/res/drawable

Android has many res/drawable-* folders, use as applies to your app but at minimum add to res/drawable

Then run cordova prepare or build or run

Answer 3

npm install -g cordova-res

then cordova-res

also supports adaptive icons for android

Answer 4

If you are using cordova 3.5.0 they have updated the docs. In older versions i've always had to replace the icons manually in the project but the latest version of cordova is working fine.

http://cordova.apache.org/docs/en/3.5.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens

As you can see here https://github.com/phonegap/phonegap-cli/issues/58 it's been a common problem. So if you are using an older version of cordova i recommend to update it with the command npm update -g cordova

And after that you should update your config.xml to something like this:

    <icon src="www/res/drawable-xxxhdpi/icon.png" />
    <platform name="android">
          <icon src="www/res/drawable-ldpi/icon.png" density="ldpi" />
          <icon src="www/res/drawable-mdpi/icon.png" density="mdpi" />
          <icon src="www/res/drawable-hdpi/icon.png" density="hdpi" />
          <icon src="www/res/drawable-xhdpi/icon.png" density="xhdpi" />
    </platform>

    <platform name="ios">
              <!-- iOS 7.0+ -->
              <!-- iPhone / iPod Touch  -->
              <icon src="www/res/ios/icon-60.png" width="60" height="60" />
              <icon src="www/res/ios/icon-60@2x.png" width="120" height="120" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-76.png" width="76" height="76" />
              <icon src="www/res/ios/icon-76@2x.png" width="152" height="152" />
              <!-- iOS 6.1 -->
              <!-- Spotlight Icon -->
              <icon src="www/res/ios/icon-40.png" width="40" height="40" />
              <icon src="www/res/ios/icon-40@2x.png" width="80" height="80" />
              <!-- iPhone / iPod Touch -->
              <icon src="www/res/ios/icon.png" width="57" height="57" />
              <icon src="www/res/ios/icon@2x.png" width="114" height="114" />
              <!-- iPad -->
              <icon src="www/res/ios/icon-72.png" width="72" height="72" />
              <icon src="www/res/ios/icon-72@2x.png" width="144" height="144" />
              <!-- iPhone Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-small.png" width="29" height="29" />
              <icon src="www/res/ios/icon-small@2x.png" width="58" height="58" />
              <!-- iPad Spotlight and Settings Icon -->
              <icon src="www/res/ios/icon-50.png" width="50" height="50" />
              <icon src="www/res/ios/icon-50@2x.png" width="100" height="100" />
     </platform>

As you can see the URIs are relative to the cordova project's path, not to the www folder.

Answer 5

If you are willing to install extra software for icon generation you can use Ionic which has such function.

Do the following:

1. npm install ionic -g
2. Put png, psd or .ai files for icons and/or splashscreens to ${project_location}/resources
3. ionic resources

If you want to generate icons only there is a handy key for that:

ionic resources --icon

More details here

Answer 6

Try following https://www.npmjs.org/package/cordova-gen-icon

Example:

$ cordova create hello com.example.hello
Creating a new cordova project with name "HelloCordova" and id "com.example.hello" at location "hello"
$ cd hello
$ cordova platform add ios
Creating ios project...
Preparing ios project
$ cordova-gen-icon 
Generate cordova icons with
project: .
icon   : ./www/img/logo.png
target : 

generate iOS icons
Success generate icon set