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.html). I also added 2 platforms (iOS and Android).

When I run either cordova run ios or cordova run android, the project still has the default Cordova icons. My understanding from the documentation is that Corodva is supposed to create the icons automatically based in the icon.png I supplied in the config.xml.

config.xml:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.testapp" version="1.1.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>SingleApp</name>
  <preference name="DisallowOverscroll" value="true" />
  <preference name="AutoHideSplashScreen" value="false" />
  <preference name="Orientation" value="portrait" />
  <preference name="Fullscreen" value="false" />
  <preference name="target-device" value="handset" />

  <description>
      A sample Apache Cordova application that responds to the deviceready event.
  </description>
  <author email="dev@cordova.apache.org" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

in Cordova 5.1.1, the icons does not work well! Check my answer here to know everything you should know about icons: http://stackoverflow.com/a/31674547/82609 — Sebastien Lorber, Jul 28 '15 at 11:16

score 74 · Accepted Answer · answered May 23 '14 at 13:31

74

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).

answered May 23 '14 at 13:31

Alex

1,712
19
16

4

Thank you @Alex for sharing that script, it's perfect :-) – jolyonruss Oct 22 '14 at 14:15
5

This works great. Thanks Alex. He's also got one for [splash screens](https://github.com/AlexDisler/cordova-splash). – keepitreal Dec 01 '14 at 15:52
1

@Alex ,keepitreal: Will this override config.xml specification for slpashscreen? – Kishor Pawar Sep 12 '15 at 08:10
Great script! Thank you. I did get one error: Cordova 5.1 output : Generating Icons for android ✓ drawable-ldpi/icon.png created ✓ drawable-mdpi/icon.png created ✓ drawable-hdpi/icon.png created ✓ drawable-xhdpi/icon.png created { [Error: Command failed: convert: unable to open image `platforms/android/res/drawable/icon.png': No such file or directory @ error/blob.c/OpenBlob/2709. convert: WriteBlob Failed `platforms/android/res/drawable/icon.png' @ error/png.c/MagickPNGErrorHandler/1645. ] timedOut: false, killed: false, code: 1, signal: null } – kris Nov 06 '15 at 15:23
some buggy stuff, had the same error as above. Also it doesn't update config.xml, am I right? "ionic resource" supposed to do the trick but also hangs – Toolkit Nov 30 '15 at 08:40

score 14 · Answer 2 · answered Jun 03 '14 at 15:15

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.

Do you know if this will then package the app with all of the assets still contained in the projects `www` folder? If so, this causes bloat in the app package. Just wondering if that was addressed with this new rollout? — Dawson Loudon, Jun 03 '14 at 23:39
yes you can create a folder outside the www/ with the images and address them from the config.xml file, the folder can be even outside the cordova project folder. Ex: "../Image_folder" — Javier Abrego, Jun 04 '14 at 07:12
if you put it inside the www folder it will package the app with the images inside, if you locate them outside the package it won't increase in size. — Javier Abrego, Jun 04 '14 at 12:56
Cordova Team should really consider fixing they documents and samples, most of them are useless and even confusing! Thank you — Developia, Apr 15 '15 at 20:26

score 8 · Answer 3 · answered May 28 '14 at 16:49

8

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

answered May 28 '14 at 16:49

Dawson Loudon

6,029
2
27
31

Is this still the case? It feels like it was something that was addressed a long time ago... – John McLear Sep 21 '17 at 09:51
Not sure, this was 3 years ago. Haven't been active with cordova for a few years now. – Dawson Loudon Sep 21 '17 at 17:44

score 8 · Answer 4 · answered Feb 14 '15 at 15:17

8

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

answered Feb 14 '15 at 15:17

Aleksandr Kravets

5,750
7
53
72

works but images are too bug, i have a 80Kb image and it created a total of 12 Mb, I guess I better save them manually – Toolkit Dec 01 '15 at 03:53
1

ionic uses `cordova-res` under the hood https://github.com/ionic-team/cordova-res, it might be enough if you don't want to install ionic – Krzysztof Grzybek Apr 15 '20 at 18:29
It was mentioned in answers – Aleksandr Kravets Apr 22 '20 at 07:48

score 2 · Answer 5 · answered Jun 02 '14 at 20:23

2

Don't you need to specify the folder that has the icon on it? Cordova replaces the icon with the default one when it is not found.

Have you tried to replace with something like:

<icon src="res/icon.png" />

answered Jun 02 '14 at 20:23

Davi S.

111
9

1

in Cordova 5.1.1, the icons does not work well! Your answer won't work for Android. Check my answer here to know everything you should know about icons: http://stackoverflow.com/a/31674547/82609 – Sebastien Lorber Jul 28 '15 at 11:17

score 2 · Answer 6 · answered Nov 17 '19 at 17:20

2

npm install -g cordova-res

then cordova-res

also supports adaptive icons for android

answered Nov 17 '19 at 17:20

Reza

18,865
13
88
163

score 0 · Answer 7 · answered Sep 01 '14 at 23:17

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

MTK · Answer 8 · 2017-08-06T12:01:18.357

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

score 0 · Answer 9 · answered Aug 31 '20 at 09:28

Please upload your icon here: https://pgicons.abiro.com/

You can easily get all things from one station, like Icons(All Platforms), Splash Screens(All Platforms), config.xml (with generated icon name and path).

You just need to replace the res folder and update config.xml, nothing else.

Generating iOS and Android icons in Cordova / PhoneGap

9 Answers9

Linked