The 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
<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>
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
<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.pngsince 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.
- 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.
I posted about icons and splash screens help awhile back here in case it’s useful as a related reference.