16
Dec

Ionic – Adding an App Icon and Splash Screen

Adding an app icon and a splash screen are generally quite essential to the finishing of an app. Up until recently, because of the various different device screen sizes and resolutions, this caused a not insubstantial amount of trauma to us developers.

With Ionic’s CLI release 1.2.14, this process has been made as simple and seamless as most other things contained in the Ionic framework.

Here’s the blog post from Ionic detailing the changes they’ve made to this process: http://ionicframework.com/blog/automating-icons-and-splash-screens/

Unfortunately, despite the process now being simple, the Ionic blog post doesn’t actually take you through the whole process, and it took us a little while to figure out exactly how to do it. Hopefully the following should be instructive enough for any devs who’ve run into the same problems that we did with this…

Ok, firstly:

1. For the app icon, you need an icon with size: 192px*192px.
2. For the splash screen, you need an overall size of at least: 2208px*2208px, and any centre graphic you may have should fit within a 1200px*1200px centre square.

Next:

1. Create a folder named ‘resources’ at the top level of your project, e.g: ‘projectName/resources’.
2. Place both the app icon and the splash screen in the ‘resources’ folder.

If necessary, update the Ionic CLI by running:

npm install -g ionic

Then run:

ionic resources

Running ‘ionic resources’ sends your splash screen and app icon to Ionic’s image resizing and cropping server, which creates the various different image sizes necessary for compatibility with all devices.

If you now build your app, you’ll notice that the app icon is present. The splash screen, however, is not – though we only tested this on an Android device. To get the splash screen to display (on Android, at least), you need add the following preferences to your project’s config.xml file:

 <preference name="SplashScreen" value="screen"/>
 <preference name="SplashScreenDelay" value="10000"/>

The ‘SplashScreenDelay’ preference is optional.

If you now build the app both the app icon and the splash screen should be present.