Search code examples
androidioscordovaphonegap-pluginscordova-plugins

Generating iOS and Android icons in Cordova / PhoneGap


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="[email protected]" href="http://cordova.io">
      Apache Cordova Team
  </author>
  <content src="index.html" />
  <access origin="*" />

  <icon src="icon.png" />

</widget>

Solution

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