Generating Icon and splash screen in ionic 3

Icon in Ionic App is small image seen when your app is installed and lets say placed on home screens or installed apps.

Splash Screen in Ionic App is image seen when you launch application, and then disappers after a delay, moving to your main application.

Lets learn Generating Icon and splash screen in ionic 3

Ionic Provides simple CLI command for Generating Icon and splash screen in ionic 3.

http://ionicframework.com/docs/cli/icon-splashscreen.html

First you need to Create 2 files with name icon.png (192×192 px) and splash.png (2208×2208 px) in basefolder/resources folder.

Use following command for Generating Icon and splash screen in ionic 3. It will automatically generate, all the required files and place relevant entries in config.xml.

$ ionic resources

You can also use separate command:

$ ionic resources — splash
$ ionic resources — icon

Once generate successful, you can check in resources folder.

ajay:resources$ tree 
.
|-- android
|   |-- icon
|   |   |-- drawable-hdpi-icon.png
|   |   |-- drawable-ldpi-icon.png
|   |   |-- drawable-mdpi-icon.png
|   |   |-- drawable-xhdpi-icon.png
|   |   |-- drawable-xxhdpi-icon.png
|   |   `-- drawable-xxxhdpi-icon.png
|   `-- splash
|       |-- drawable-land-hdpi-screen.png
|       |-- drawable-land-ldpi-screen.png
|       |-- drawable-land-mdpi-screen.png
|       |-- drawable-land-xhdpi-screen.png
|       |-- drawable-land-xxhdpi-screen.png
|       |-- drawable-land-xxxhdpi-screen.png
|       |-- drawable-port-hdpi-screen.png
|       |-- drawable-port-ldpi-screen.png
|       |-- drawable-port-mdpi-screen.png
|       |-- drawable-port-xhdpi-screen.png
|       |-- drawable-port-xxhdpi-screen.png
|       `-- drawable-port-xxxhdpi-screen.png
|-- icon.png
`-- splash.png

You can also chekin into the config.xml file for relevant entries.

15   <platform name="android">
16     <allow-intent href="market:*"/>
17     <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
18     <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
19     <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
20     <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
21     <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
22     <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
23     <splash src="resources/android/splash/drawable-land-ldpi-screen.png" density="land-ldpi"/>
24     <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi"/>
25     <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi"/>
26     <splash src="resources/android/splash/drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
27     <splash src="resources/android/splash/drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
28     <splash src="resources/android/splash/drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
29     <splash src="resources/android/splash/drawable-port-ldpi-screen.png" density="port-ldpi"/>
30     <splash src="resources/android/splash/drawable-port-mdpi-screen.png" density="port-mdpi"/>
31     <splash src="resources/android/splash/drawable-port-hdpi-screen.png" density="port-hdpi"/>
32     <splash src="resources/android/splash/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
33     <splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
34     <splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
35   </platform>

These are simple steps for Generating Icon and splash screen in ionic 3. Have a good time coding your next big app.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

mautic is open source marketing automation