New Icons and Splash Screen Help for Cordova/PhoneGap Apps

September 29, 2014By 2 Comments

cordova_botThe Cordova CLI recently included some updates developers may not be aware of but find helpful in configuring splash screens and icons for their mobile apps. There’s now support for a <splash> and <icon> elements in the config.xml file. You can use these elements to specify each of the splash screen images and icons desired per platform and they will now be copied into their respective platform locations for you. Prior to this change you would need to use hook or copy them down to their platform folders manually; not ideal. These changes also make it much better for managing your assets from a source control and team perspective since you don’t want to check in your platforms folders but can now keep them in their own folders along with the www.

The tags look like the following but you would include a list of them for all the sizes you want to support under each platform:

<platform name="ios">
     <icon src="icons/myIcon.png" width="80" height="80" />    	     
</platform>
<platform name="ios">
     <splash src="iphone/splash-default.png" width="2048" height="1536"/>
</platform>
If specified, the icons and splash screens will get copied down when a platform is added (cordova platform add ios). They will also get copied again upon build (cordova build ios) though if you specified them after a platform had been added.

Check out the docs for details on how to configure the icons splash screens for the different platforms and sizes. I tested this out on iOS and Android myself and it worked great.

Some things to be aware of…

  • The image paths you specify are relative to the root project folder, NOT the www folder
  • The names of the images will change to what the CLI defaults them to in their final destination so don’t be confused if you don’t see the same file names. They are renamed to defaults based on the sizes or densities specified. For instance, if I have the following specified for a splash screen size for iOS pointing to my image in the rootProj/iphone folder named mySplash.png:
    <platform name="ios">
        <splash src="iphone/mySplash.png" width="320" height="480"/>
    </platform>
    

    It will be placed in the ios platform splash location (ie: rootProj/platforms/ios/HelloCordova/Resources/splash) as Default~iphone.png since that’s the size that it matched.

  • If you specify just one icon for a platform, that same icon will be used for all resolutions across the board.

    <platform name="android">
        <icon src="myIcon.png"/>
    </platform>
    
    <platform name="ios">
        <icon src="myIcon.png"/>
    </platform>
    

    ***Update: If you visited previously and saw a mention about support for Imagemagick to resize a single icon to all resolutions, this feature was not actually contained in the 3.6 version of the Cordova CLI as I explained it originally and I really apologize for any confusion. It was actually a forked version that was not included in the Cordova release.

    HOWEVER, this is still possible to achieve using this cordova-icon package in a cordova hook upon build with a single image file (1024×1024 recommended). Your image file will be resized to all of the different icon sizes and copied down to the different platforms. The cordova-icon npm page has a couple of instructions to follow to set this up but is very straightforward. You should also check out Alex’s blog post about this topic for more details.

    Remember the above is only needed if you want to use one image to be resized for your project. If you specify an icon element in your config.xml per density, the CLI will copy those in for you. If you want to use a UI tool to generate icon sizes for you originally to then manually add to the config.xml after, check out MakeAppIcon.
  • If you’re wondering about iOS8 support for iPhone 6 and iPhone 6 Plus icons and splash screens, it’s in progress and you can find out the latest status here (see subtasks 48-53). This issue tracks all things being worked on for iOS8 support so you may want to bookmark it for general reference.
  • You can include both splash and icon elements in the same parent platform element in your config.xml file, such as:
    <platform name="ios">
        <icon src="icons/myIcon.png" width="80" height="80" />    	
        <splash src="iphone/mySplash.png" width="320" height="480"/>
    </platform>
    

    They don’t have to be separate unless you want to do so for readability.

  • If you develop with the Ionic framework this change is available to you since the Ionic CLI wraps the Cordova CLI.
  • This change has not landed in the PhoneGap CLI yet but should be coming in the next version soon.
  • Don’t confuse this with the PhoneGap Build elements that are used for icons and splash screens, though they offer similar support, they are separate and you should follow the documentation for the CLI.
The <icon> support appeared in version 3.5, a bit prior to the <splash> screen element support, but I still wanted to point out both in case some were not aware of it.

I posted about icons and splash screens help awhile back here in case it’s useful as a related reference.

Filed in: CordovaioniciOSMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (2)

Trackback URL | Comments RSS Feed

  1. Ian says:

    Thanks for the article! I’m really excited about the automatic icon/splash generation using ImageMagick, but unfortunately I can’t get it to work. I have ImageMagick installed (`which convert`) and I created tag as you have above, but the specified .png just gets copied to platforms/android/bin/res/drawable/icon.png. No resizing is happening. Any tips on how to debug this?

  2. Pierre says:

    Hello,

    Thanks for this info!

    Does this work for iPhone 6 / 6+ splash screens as well? I tried a number of things with no luck, I guess we need to wait for an update of the cordova CLI?

    Many thanks

Leave a Reply