Generating iOS and Android icons in Cordova / PhoneGap
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/[email protected]" width="120" height="120" />
<!-- iPad -->
<icon src="www/res/ios/icon-76.png" width="76" height="76" />
<icon src="www/res/ios/[email protected]" 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/[email protected]" width="80" height="80" />
<!-- iPhone / iPod Touch -->
<icon src="www/res/ios/icon.png" width="57" height="57" />
<icon src="www/res/ios/[email protected]" width="114" height="114" />
<!-- iPad -->
<icon src="www/res/ios/icon-72.png" width="72" height="72" />
<icon src="www/res/ios/[email protected]" 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/[email protected]" 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/[email protected]" width="100" height="100" />
</platform>
As you can see the URIs are relative to the cordova project's path, not to the www folder.
I wrote a script that auto generates icons for cordova using ImageMagick:
https://github.com/AlexDisler/cordova-icon
To use it, create an "icon.png" file and place it in the root folder of your project, then run:
cordova-icon
and it will generate all the required icons for the platforms your project has.
You can also configure it as a hook in your cordova project so the icons will be generated every time you build the project based on the icon.png you've added. (instructions in the readme).
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
If you are willing to install extra software for icon generation you can use Ionic which has such function.
Do the following:
npm install ionic -g- Put png, psd or .ai files for icons and/or splashscreens to
${project_location}/resources ionic resources
If you want to generate icons only there is a handy key for that:
ionic resources --icon
More details here