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.

 

2 thoughts on “Generating Icon and splash screen in ionic 3

  • January 22, 2018 at 9:12 AM
    Permalink

    The command “ionic resources” has been updated in Ionic. You should use “ionic cordova resources” now.

    Reply
  • February 6, 2018 at 6:19 AM
    Permalink

    Very good info but the command is

    ionic cordova resources

    Reply

Leave a Reply

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

Bitnami