How to set icon and splash screen in android using Ionic\Cordova

Question

I have an Ionic project with Android platform using Cordova. I want to set an icon and Splash screen in the project. For icon I have made a directory and added logo that will show.

res\android\pkLogo.png

Also added this line into my config.xml

 <icon src="res/android/pkLogo.png" platform="android" width="57" height="57" density="mdpi" />

But the problem is Apache default icon is showing. What I have done wrong I took help from here cordova

I want to show splash screen, how it is possible? I searched a lot, found some links but I am solve it.

How to set Icon and splash screen in android using ionic\cordova

Answer 1

Run ionic cordova resources from CLI

After that following folder will be created

resources > android

resources > ios

Add icon.png and splash.png file in resource folder and run ionic cordova resources command again. Or you can just run ionic cordova run <platform> and it will generate the resource files for that platform (ios, android, etc).

It will create icon and splash screen automatically and also add in config.xml file. Nothing to do manully. Ionic will do everything automatically for you.

Answer 2

Go to your project directory - /resources/android/icon/add your icons here as per required size and names below.

drawable-hdpi-icon.png - 72*72

drawable-ldpi-icon.png - 36*36

drawable-mdpi-icon.png - 48*48

drawable-xhdpi-icon.png - 96*96

drawable-xxhdpi-icon.png - 144*144

drawable-xxxhdpi-icon.png - 192*192

As well add the icons in the below directory if it's needed - project directory-/platforms/android/res/place the above icons as per specific folder.

And run the below terminal commands it'll update your icons same way you can manage your splash screen as well.

$ionic build android

$ionic run android

Answer 3

I hope you are doing well.as you ask about change splash and launcher icon I was also trying to do same. then I find a documented way from Ionic CLI.which helps me a lot and save my time too. we just need to do three simple step:

1> create an image of the icon with the size of 192x192 px and Save it as icon.png, icon.psd or icon.ai file within the resources directory of project root.

2>create an image of the icon with the size of 2208x2208 px and Save it as splash.png, splash.psd or splash.ai file within the resources directory of project root.

3>this is main step so just run this command from terminal

ionic resources

then you will see some images in your /demoApp/resources/android/icon repository and /demoApp/resources/android/splash.

and if you want to change only splash screen then you have to follow step 2 along with command ionic resources --splash. then you can see your splash.

or just for the icon, you have to follow only step 1 along with ionic resources --icon.

care if you want to create splash and icon separately then don't follow step 3 means step 3 used for generating both.