How to change splashscreen and app icon on Android w/ Ionic

First, Ionic is kind of stupid!
Now let’s make it smarter:
1. go to: /usr/local/lib/node_modules/ionic/node_modules/ionic-app-lib/lib/resources.js
2. change cacheImages property to false
3. remove android platform
4. re-add android platform
5. regenerate resources
Now Ionic is less stupid!

And in config.xml make sure the code is configured as follows:

<icon src="resources/android/icon/drawable-ldpi-icon.png" density="ldpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>
<preference name="SplashScreen" value="screen"/>
How to change splashscreen and app icon on Android w/ Ionic

Images Aspect Ratio and Google Chrome

Google Chrome does not know how to maintain aspect ratio of images if the parent has “display: flex”.

In order to make it work and display the images in a responsive manner, the image must be contained inĀ  another element that has a width/min-width/max-width. Then also set max width and height for the image itself.

Here is a sample:

HTML:

 

 

CSS:

.image-container {
width: 50px;
}

img {
max-width: 50px;
max-height: 150px;
height: auto;
width: auto;
}

Images Aspect Ratio and Google Chrome