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.

Answer 4

Run ionic 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 resources command again.

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.

It work for me, only one thing

Before to build your android app go to edit platforms/android/AndroidManifest.xml

and go to

<application android:label="@string/app_name">

and add the next

<application android:icon="@drawable/icon" android:label="@string/app_name">

Regards!

Answer 5

Icon Source Image Save an icon.png, icon.psd or icon.ai file within the resources directory at the root of the Cordova project. The icon image’s minimum dimensions should be 192x192 px, and should have no rounded corners. Then run this command in your terminal(cd to your current directory)

$ ionic resources --icon

Splash Screen Source Image ave a splash.png, splash.psd or splash.ai file within the resources directory at the root of the Cordova project. Splash screen dimensions vary for each platform, device and orientation, so a square source image is required the generate each of various sizes. The source image’s minimum dimensions should be 2208x2208 px, and its artwork should be centered within the square.Then run this command in your terminal(cd to your current directory)

$ ionic resources --splash

And you are done.

Refer to this link Ionic Splash screen and icon generator.

Answer 6

For Android look inside /platform/android/res For Ios look inside /platform/ios/yourapp/Resources

Hope it helps

Answer 7

You can use ionic cordova resources for generating splash screen and icons for your Android application. This command creates icons and splash screen under android folder.

icons folder contains:

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

If you want to create only icons then you can use

ionic cordova resources --icon

If you want to create only splash screen then you can use

ionic cordova resources --splash

Answer 8

EDIT THE IMAGE if running this command doesn't work (also for ios):

ionic cordova resources android --splash --force

and run command again :)

This will solve the "error":

[OK] No need to regenerate images--source files unchanged.

Tip: edit the image for each platform (even adjust size by 1 px) otherwise ionic doesn't detect the source file has changed with each new command.

Answer 9

Create your customized icon.png 1024 *1024 px and splash.png 2732 *2732 px then replace file in resource directory then Run ionic cordova resources Automatically the ios and android slash and icon img will be generated and config file will be changed

For splash screen template : https://code.ionicframework.com/resources/splash.psd (Reference)

Answer 10

When an app first created, there are 2 files in resources folder, icon.png and splash.png.

Replace these 2 files with your desired icon and splash files.

File name must be the same Size of icon.png must be minimum 1024×1024 and splash.png must be minimum 2732×2732 Once icon.png and splash.png files have been replaced. Follow this steps:

1) You must have FREE Ionic account. This is because the icon and splash generation/transformation is using Ionic server.

2) On your project folder, run following command:

> ionic login

Then enter your email and password.

3) On project folder, run (Choose between ios or android if you are building iOS or Android app):

> ionic cordova resources ios

> ionic cordova resources android

Ionic will transform your icon and splash files into differents versions that your target platform requires. In the process, config.xml, will also be updated.