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 do you edit in vim, on Mac?


You press the “i” key, because the mac does not have an “insert” key.

(On windows and linux you press insert)

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:





.image-container {
width: 50px;

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