How to change default launch icon of ionic app


#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


#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.


#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.


#9

hi, i have managed to change launcher icon

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

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.


#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>

#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 -

https://stack247.wordpress.com/2018/06/05/ionic-3-change-app-icon-and-splash-screen/


#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.