Automatically Generate Resized Icons and Splash Screens with Ionic Framework

Rather than manually generating or cropping different size of images of icons and splash screens for different resolutions, orientation and platforms, we can use Ionic Framework to do this work for us. Ionic will use its resizing and cropping server to do this. We will need a recent version of Ionic CLI.

Below are the steps to do this:
1. Prepare the source icon or splash screen file
For icon file:
- the file is named with 'icon' and has either .png, .psd or .ai extension type (i.e. icon.png, icon.psd or icon.ai)
- image's minimum dimensions should be 192 x 192 px
- rounded corners will be applied for specific platforms (e.g. iOS)

For splash screen file:
- the file is named with 'splash' and has either .png, .psd or .ai extension type (i.e. splash.png, splash.psd or splash.ai)
- image's minimum dimensions should be 2208 x 2208 px
- the artwork should be centered within inner 1200 x 1200 px area

2. Use a new or existing Ionic project to do this job
To have the Ionic server doing the resizing and cropping, we will need to put the file inside an Ionic project.

3. Make sure we have the intended platform on the Ionic project.
To add a platform, run ionic platform add command in the root folder of the project, for example:

C:\MyLabs\IonicTemplate\SideMenu>ionic platform add android

4. Create 'resources' folder on the root of the project

5. Put the icon or splash screen file in the folder

6. Run ionic resources command at the project root
To generate icons, run ionic resources --icon command (with double dash characters), below is a screenshot:


To generate splash screens, run ionic resources --splash command (with double dash characters), below is a screenshot:


7. Get the icons from 'resources/PLATFORM_NAME/icon' folder or the splash screens from 'resources/PLATFORM_NAME/splash' folder