ionic

Using Ionic to generate icons and splash screens for Cordova projects

By Tyler Crammond, published Wednesday, April 22nd, 2015


It can be a little tedious to produce icons and splash screen assets for your app across multiple platforms and screen sizes. Fortunately, the Ionic Framework‘s CLI provides a handy little command to to generate a lot of these for you.

Even if you don’t use the Ionic framework in your project, you should still be able to use the CLI to generate these assets for you.

Requirements

  • The Ionic CLI
  • Your project should be a Cordova/Phonegap project (I haven’t tried this in anything else)

Preparing your base assets

You’ll be running a command from the root if your project, and Ionic will be looking for a resources folder from there. You need to put your app’s icon and splash screen in there, named icon.png and splash.png respectively.

Some things to bear in mind about your icon and splash image:

  • The icon must be a square image and be a minimum of 192x192px. If your icon has a background don’t round the corners – the different platforms will do this by themselves.
  • The splash screen must be a square image, at least 2208×2208 px and artwork should be within a 1200×1200 px centre square (roughly).
  • Don’t use huge images – Ionic will be uploading your images to be processed and I found that very large images broke it.

When you’ve sorted all that out you should be good to go.

Generating the icons and splash screens

Once you have your assets in place at the correct sizes, run one of the below commands from the root of the project.
This is what will happen:

  • The new assets will be placed in sub-folders of the resources folder as well as the default locations for icons and images on each platform.
  • Your config.xml will be updated with all the references to each icon/splash image for each platform you have installed (perhaps make a backup first).

ionic resources
generates icons and splash screens for all platforms that are installed in your Cordova project

ionic resources --icon
generates icons only

ionic resources --splash
generates splash screens only
That’s all there is to it!