How to change default launch icon of ionic app

Ionic Framework ionic-v3
1

Hi.

I’m trying to change the default launch icons of my ionic2 app.

I’ve followed this official how to but when I launch icon to my device with

ionic run android

This is my config.xml icons section

 <platform name="android">
    <allow-intent href="market:*"/>
    <icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources/android/icon/drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources/android/icon/drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources/android/icon/drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources/android/icon/drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources/android/icon/drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
  </platform>

What would be wrong?

2

Have a look at ionic resources:
http://blog.ionic.io/automating-icons-and-splash-screens/
https://github.com/driftyco/ionic-cli#icon-and-splash-screen-image-generation

4 Likes
3

I’ve followed the instructions and on my config.xml ionic resources has generated this:

 <platform name="android">
    <allow-intent href="market:*"/>
    <icon src="resources\android\icon\drawable-ldpi-icon.png" density="ldpi"/>
    <icon src="resources\android\icon\drawable-mdpi-icon.png" density="mdpi"/>
    <icon src="resources\android\icon\drawable-hdpi-icon.png" density="hdpi"/>
    <icon src="resources\android\icon\drawable-xhdpi-icon.png" density="xhdpi"/>
    <icon src="resources\android\icon\drawable-xxhdpi-icon.png" density="xxhdpi"/>
    <icon src="resources\android\icon\drawable-xxxhdpi-icon.png" density="xxxhdpi"/>
    <splash src="resources\android\splash\drawable-land-ldpi-screen.png" density="land-ldpi"/>
    <splash src="resources\android\splash\drawable-land-mdpi-screen.png" density="land-mdpi"/>
    <splash src="resources\android\splash\drawable-land-hdpi-screen.png" density="land-hdpi"/>
    <splash src="resources\android\splash\drawable-land-xhdpi-screen.png" density="land-xhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxhdpi-screen.png" density="land-xxhdpi"/>
    <splash src="resources\android\splash\drawable-land-xxxhdpi-screen.png" density="land-xxxhdpi"/>
    <splash src="resources\android\splash\drawable-port-ldpi-screen.png" density="port-ldpi"/>
    <splash src="resources\android\splash\drawable-port-mdpi-screen.png" density="port-mdpi"/>
    <splash src="resources\android\splash\drawable-port-hdpi-screen.png" density="port-hdpi"/>
    <splash src="resources\android\splash\drawable-port-xhdpi-screen.png" density="port-xhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>
    <splash src="resources\android\splash\drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
  </platform>

Then I do ionic run android --livereload --consolelog --target=0123456789ABCDEF command and the splash and icons still the default icons, not my custon icons.

Any idea?

4

Did it actually generate the file successfully?

(I hate this advice, but it helps quite often: You might try removing and re-adding the Android platform from your project. Sometimes the /platforms directory doesn’t really do what you want - and removing is a simple way of getting rid of all the old stuff)

5

Hi Hanzo,

Can you send your resources folders screenshot? If your issue is still not solved yet.

6

Hi @Sujan12 and @vnyksj.

I’ve already tried to ionic platform rm android and ionic platform add android again and the problem persist.

These are my resources folders screenshot:

Thanks for your replies

7

I’ve changed icon and splash images this way:

  1. Copy source images to <project folder>/resources
  2. Launch command ionic resources
  3. Copy generated stuff from <project folder>/resources/res over <project folder>/platforms/android/res

Basically the point is that I had to copy resources to platform folder manually.

2 Likes
8

from my understanding, when you run:
ionic cordova build android
config.xml located at /platforms/android/res/xml is processed:

config.xml :

  <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />

You can see that these files are sourced from resources/android/

Hence we need to replace the icons and splash images at resources/android and then run the build command.

2 Likes
9

hi, i have managed to change launcher icon

home
Screenshot_2018-03-07-17-34-13-898_com.miui.home.png720×1280 782 KB

But this small icon still uses ionic default. How do change this icon?

IMG_20180307_172103
IMG_20180307_172103.png547×1280 354 KB

I have deleted all ionic logo from resources/android folder and platform/android/res folder.

I seriously dont know why and where this icon is from??

Thanks.

3 Likes
10

I named my icon with these (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi ) names in resources/android/icon folder then run command ionic cordova run android. Then it works fine and icon changed.

config.xml

<platform name="android">
        <icon src="resources/android/icon/ldpi.png" density="ldpi" />
        <icon src="resources/android/icon/mdpi.png" density="mdpi" />
        <icon src="resources/android/icon/hdpi.png" density="hdpi" />
        <icon src="resources/android/icon/xhdpi.png" density="xhdpi" />
        <icon src="resources/android/icon/xxhdpi.png" density="xxhdpi" />
        <icon src="resources/android/icon/xxxhdpi.png" density="xxxhdpi" />
    </platform>
1 Like
12

These are Cordova resources. You can replace icon.png and splash.png and run
ionic cordova resources to generate custom icons and splash screens for your
app. See ionic cordova resources --help for details.

Cordova reference documentation:

13

I’m have same this issue, any solution? share pleaseeeee… thanks

14

just add your image in projectFolder/resources and run $ionic cordova resources

15

it works for me. You should change the file name of the icon

16

Refer this link -

Ionic 3 Change App Icon and Splash Screen – Stack 24/7

17

Have you found a solution for this problem?

18

Hi @cikcoh, I have the same problem. Did you manage to solve this?

19

Hi, i’ve upgraded to ionic3,
What i did was:
1 - replace icon.png in yourproject/resources folder to your custom icon with the same name.
2 - make sure your config.xml has these

    <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
    <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
    <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
    <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
    <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
    <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />

3 - run ionic cordova resources android
4 - check yourproject/resources/android/icon folder, new images should be generated

try removing/adding platform and run ionic cordova resources android again if it doesn’t work,

hope this helps you

20

Thanks for replying @cikcoh. That indeed helps with changing the app icon & splash screen but I still have the same problem as the picture you posted earlier.

image

I’ve removed and added platforms and re-run ionic cordova resources multiple times but it doesn’t change the icon when i open it like in the image.

21

Hi,when I’m facing the problem, I’m using ionic1.
After migrating to ionic3, I’m no longer facing the above issue.

Would clearing the app cache helps?

Sorry that i can’t do much.