Automatically creating icons and splash screen resources

Ionic tools are so beautiful that now you don't have to struggle like we all used to, some years back in hybrid development. You can avoid the headache of adding icons, splash screens, and so on for every platform with different sizes. Now we don't have to deal with all this stress and Ionic have made it possible for us with a single command:

    $ ionic resources

Ionic automatically crops, resizes, and creates icons and splash screens from source images for each platform and it does this in different sizes for different devices such as mobiles, tablets, and so on. All these are generated on Ionic's resizing and cropping servers without any overload from installing libraries or plugins on local machines.

Image sizes and specifications

Ionic resources have some specification of the source image of the icon and splash screen. Images can be either .png files, Photoshop.psd files, or Illustrator .ai files. There is a minimum size requirement for the source images for both. An icon's minimum size should be 192x192 px, and it should not have rounded corners. In case of splash screen, the minimum requirement is 2208x2208 px so that for every platform Ionic can prepare resources. The splash screen's artwork should roughly fit within a center square (1200x1200 px). Additionally, when the orientation preference configuration is set to either landscape or portrait mode, then only the necessary images will be generated.
For creating just icons or splash screen, the ionic resources command has two flags that allow you to create just icons or splash screens, not both:

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

If a proper size is not provided for the source files, this will only create resources that are less than the size of the source image. For example, there might be chances that resources for tablets or high resolution screens are not generated.

Platform specific resources

Ionic provides support for building icons and splash screen resources for various platforms and devices. For building resources, we just need to place the source image inside the resources folder with the name icon.png and splash.png. This way you will get the extracted icons and splash screens for each platform, such as a Native rounded corners icon for iOS, and transparent background for an Android icon.

To summarize the steps:

1. Add files to the resources folder naming icon.png and splash.png. (.psd and .ai can also be used).
2. Make sure the minimum size requirements for icon are 192x192 px and for splash 2208x2208 px.
3. Run the ionic resources command from the CLI.

Different platforms have different ways of styling icons, for example, iOS will apply its rounded corners, that is why we recommend the Ionic source file to be without rounded corners. Also, using the ionic resources command will require at least Cordova 3.6 or more.