How to Generate Icons and Splash Screens with the Ionic CLI

There are lots of android and iOS devices in the world. Manually generating icons and splash screens to fit every need seems too difficult. There is a way to automate it with the ionic framework with Cordova.

Let’s try it with starting a project creation,

Step 1:

ionic start myApp blank

Create a project with this command where myApp is the project name.

Step 2:

ionic cordova resources

It will automatically update your config.xml to reflect the changes in the generated images (default images) with all dpi resolutions

Two folders are created in the resources/ folder:

1. icon
2. splash

The two main platforms iOS and Android have their naming conventions, but the principle is the same.

The Android density is as follow:

1. ldpi (low)
2. mdpi (medium)
3. hdpi (high)
4. xhdpi (extra-high)
5. xxhdpi (extra-extra-high)
6. xxxhdpi (extra-extra-extra-high)

Step 3:

To generate our app icon and splash screen we need two images. For the app icon, the image should ideally be at least 1024×1024px and located at resources/icon.png and for the splash screen, the image should ideally be at least 2732×2732px and located at resources/splash.png. For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the image. We need to ensure that after changing the new icon and splash screen image's name is the same in the resources folder and images should be png format.

Step 4:

After changing the icon and splash in the resources folder write the following command in your project

For Android:

ionic cordova resources android

For iOS:

ionic cordova resources ios

Conclusion

Generating icons and splash screens is easy: it’s just one command.

However, it comes with some extra tasks that are outside of Ionic’s control. The images will be transformed by each platform and the result might surprise you.

If it does, make sure that you are using:

1. Right image format
2. Right image quality and size and resolutions
3. Ensure that image size should be under 100 or 200kb otherwise after generating images for all platforms it will affect your app size

The above code is tested by me. It worked fine from my end with testing. This is very important for mobile app development. Hope you have enjoyed the blog. Please share your thoughts in the comment section. See you on my next blog.