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.
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
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.
