How to change the icon of an ionic application?

Question

I'm trying for hours to deploy an ionic application to a android device. I have change the icon and splash.

Then I do:

ionic resources

I obtain:

Then I do:

ionic platform rm android
ionic platform add android
ionic run android

But I have always the default icon and splash values of ionic. I have seen in the resources folder and I have the correct images in the android folder.

Can you see what I'm doing wrong?

Answer 1

There is a bug in cordova-android platform version 6.0.0 which copies the resources to /res instead of /platforms/android/res. The latest version of cordova (6.5.0) has cordova-android platform version 6.1.1 which fixes this bug.

npm install -g cordova

It might be necessary to manually update the cordova-android version too.

cordova platform update android@6.1.1

Answer 2

in Ionic 3 :

ionic cordova resources

Automatically create icon and splash screen resources Ionic can automatically generate perfectly sized icons and splash screens from source images (.png, .psd, or .ai) for your Cordova platforms.

The source image for icons should ideally be at least 1024×1024px and located at resources/icon.png. The source image for splash screens should ideally be at least 2732×2732px and located at resources/splash.png. If you used ionic start, there should already be default Ionic resources in the resources/ directory, which you can overwrite.

You can also generate platform-specific icons and splash screens by placing them in the respective resources// directory. For example, to generate an icon for Android, place your image at resources/android/icon.png.

By default, this command will not regenerate resources whose source image has not changed. To disable this functionality and always overwrite generated images, use --force.

For best results, the splash screen's artwork should roughly fit within a square (1200×1200px) at the center of the image. You can use https://code.ionicframework.com/resources/splash.psd as a template for your splash screen.

ionic cordova resources will automatically update your config.xml to reflect the changes in the generated images, which Cordova then configures.

Cordova reference documentation: - Icons - Splash Screens

This command uses Ionic servers, so we have to be logged into our Ionic account that is free. Use ionic login to login.

Usage:

$ ionic resources [<platform>] [options]

Inputs:

platform ................. The platform for which you would like to generate resources (e.g. ios, android)

Options:

--force, -f .............. Force regeneration of resources
--icon, -i ............... Generate icon resources
--splash, -s ............. Generate splash screen resources

Examples:

$ ionic cordova resources
$ ionic cordova resources ios
$ ionic cordova resources android

Answer 3

ionic platfrom add android write in console, after adding platfrom go to platforms>Android >res>mipmap-mdpi+mipmap-ldpi+mipmap-hdpi+mipmap-xhdpi . and change those folder icon

this is another way to generate icon write in cli-

ionic resources --icon

Answer 4

Update

This issue has been fixed in Cordova 6.5.0.

Update your project to Cordova 6.5.0 using following commands.

• npm install -g cordova

If you already have the project built using cordova earlier version you have to update the android platform of your project.

• cordova platform update android@6.1.1

Use following command:

1. ionic prepare android
2. ionic resources --clean-cache

If this not solve your problem.

In you current project file there is a res folder inside that folder you can find the generated icons with related folders. You can copy the content inside that folder and replace related content with the platform/android/res folder.