Ionic framework icon and splash screen generation

April 16, 2015
by Rahil Shaikh

In this tutorial we will learn to automatically generate icons and splash screens for ionic apps. The first two things that a user will see after installing your app is your app icon and splash screen. Mobile applications require icons and splash images of different sizes with respect to device dpi (density per inch), making them can be a complex job. Ionic simplifies things for you by providing resources tool.

Below are six generalized densities to consider
  • ldpi (low) ~120dpi
  • mdpi (medium) ~160dpi
  • hdpi (high) ~240dpi
  • xhdpi (extra-high) ~320dpi
  • xxhdpi (extra-extra-high) ~480dpi
  • xxxhdpi (extra-extra-extra-high) ~640dpi

Ionic's CLI provides resources command to automatically generate icons and splash screens of different sizes from a single image.

Icon

First we need to provide Ionic with a source image for generating the icon. Source images are stored in the resources directory of your application. The source image must be a (.png, .psd or .ai) format.The name of the image must be icon. So for example if you have a .png image your image should be icon.png. Make sure that the image is not less than 192 x 192px and has no rounded corners.
Once you have your image, place it in your apps resources directory.
Next run the command.

$ ionic resources --icon

 

Splash screen

Similar to icon generation, but the image should not be less than 2208x2208 px and also the artwork must be in the center of your background, as ionic will center-crop the images for different sizes. The name of the image must be splash.png if its a .png image. Place the image in the resources directory and run the following command.

$ ionic resources --splash

To generate icon and splash-screen simultaneously you can do.

$ ionic resources

Ionic automatically updates the config.xml for you.
Generated images can be found in resources/android/icon & resources/android/splash for android and resources/ios/icon & resources/ios/splash for ios.
Note: This process requires Cordova CLI version 3.6 or higher.

Ionic is a HTML5-Angular framework and uses Apache Cordova to utilize device APIs and run web app as a native mobile app. Ionic is THE framework for building Hybrid Mobile Apps using AngularJS
We are looking forward to wirte more tutorials on ionic in future.
If you have any requests or ideas please mentions them in comments below.

About

Engineer. Blogger. Thinker. Loves programming and working with emerging tech. We can also talk on Football, Gaming, World Politics, Monetary Systems.

Free PDF

Subscribe and get AngularJS Tips PDF. We never spam!
First Name:
Email:

8 comments

  1. wendy
    |

    Thanks! Great explanation. Made creating resources very easy.

  2. Jemil
    |

    Hi, Rahil, i am having a small issue concerning “ionic resources” command, after typing the command it shows a message that the task has been done, but i could not find the generated icons and splash screen inside resources/android/icon and resources/android/splash folders

    • |

      hmm seems strange, did you add android as a platform? Or can you see if you have access to write file, probably try sudo if you are running on linux.

  3. nuwa
    |

    Hi Rahil
    How do you export something like a logo for different densities in Ionic?
    I’m quite new to Ionic and I’m struggling with that.

  4. |

    Hi, thank you for this tutorial,
    I generated icons and splash screen images, but i don’t know why it generates icons have white background and splashes are croped for portrait mode?
    any kind of help will be appreciated.
    Thanks

Leave a Comment