Ionic Auto-Generate Icons and Splashscreens

Ionic is a powerful HTML5 native app development framework that helps you build native-feeling mobile apps all with web technologies like HTML, CSS, and Javascript. Even though a custom splash screen is an important way to polish your app, it may not be enough. For applications that download a lot of data, or perform other operations, more control might be necessary over the display and hiding of the splash screen.Cutting images for icons and splash screen is not too easy task.

With the new ionic CLI, all you need is a resource directory and two images.

$ ionic start newApp blank
$ cd newApp
$ cordova plugin add org.apache.cordova.splashscreen

$ mkdir  resources

Let's have some image processing work. you will need two images

1. icon(.png/.psd/.ai) of Size --> 192x192
2. splashscreen(.png/.psd/.ai) --> 2208x2208

For easy you can use imageMagick

$ convert splashscreen.png -resize 2208x2208 splashscreen.png

  

$ ionic resources
$ ionic platform add android/ios
$ ionic build android/ios

After the images are generated, the CLI will update the config.xml to include the icons and splash screens, so they will be transferred over in Cordova's build process. NOTE: This process requires Cordova CLI version 3.6 or higher. If you only need to update one of the resources, or you only want to generate icons and not both, the ionic resources command has two flags that allow you to target each asset, instead of generating both. Icon image should not already come with rounded corners.

$ ionic resources --icon
$ ionic resources --splash