CODEWITHSUNDEEP
cordovaionic-frameworkcordova-plugins
anubis
anubis

Reputation: 1505

How to change the icon of an ionic application?

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:

enter image description here

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?

Upvotes: 5

Views: 12713

Answers (5)

Max Knox
Max Knox

Reputation: 145

  1. First make sure you remove all your platforms.
  2. Make sure you have an icon.png and splash.png in your resources folder
  3. run:

ionic cordova resources

  1. Now RUN:

ionic repair

Type yes and enter when you see this:

[INFO] ionic repair will do the following:

   - Remove node_modules/ and package-lock.json
   - Run npm i to restore dependencies
   - Remove platforms/ and plugins/
   - Run cordova prepare to restore platforms and plugins

? Continue?

  1. Now build:

ionic build --prod --release

At this point you can push your web version and the icon will show in browser, and if you add platforms, the icons will match your branded icon.

Upvotes: 0

Mehdi Saghari
Mehdi Saghari

Reputation: 164

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

Upvotes: 4

Md Alamin
Md Alamin

Reputation: 1462

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

Upvotes: 0

JanP
JanP

Reputation: 1581

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 [email protected]

Upvotes: 3

coder
coder

Reputation: 8702

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.

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.

Upvotes: 1

Related Questions