I want to share my fix for the Ionic icon and splashscreen issue I just hit upon.
The issue was that no matter what I did, deploying my Ionic app to my Android phone always ended up with an empty / blank / white splash screen and the default ionic icon.
No matter what I seemed to do, that darned icon would not change.
Before I go further however, it is definitely worth pointing out an awesome feature in Ionic – ionic resources
– a command line utility which will take an icon and a splash screen image (.png
files, Photoshop .psd
files, or Illustrator .ai
files) and create you all the correctly sized icons / splash screen images AND update your config.xml
file for you. Of course, you need to have the two images to begin with – and if you don’t, check out somewhere like fiverr or odesk (ahem, upwork?) to have these files made for you.
From my project root, I put my icon.png
and splash.png
into a folder called resources
and then ran the ionic resources
command. Checking my config.xml
after this shows something along the lines of:
*snip*
<platform name="android">
<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"/>
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png"/>
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png"/>
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png"/>
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png"/>
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png"/>
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png"/>
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png"/>
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png"/>
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png"/>
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png"/>
</platform>
*snip*
And each of those resources/android… whatever paths is an actual file, resized properly.
Ok, enough of the set up. As mentioned, all this looked right yet still every time I did an ionic run android
, the icon would be the default icon, and the splash screen was empty / blank / white.
There are a number of apparent fixes to this problem online, but none seemed to work for me. The best I could tell, my ionic icon was cached somehow, but as I was building on the Mac, I didn’t have any form of Android tooling available to open the project and clean the install.
Ionic Icon Woes : The Solution
Though it took a lot of trial and error (precious hours I will never get back!), the solution to this problem was pretty easy.
I had noticed the widget id
value in my config.xml
was a bit odd. For some reason (which I haven’t figured out still), when Ionic had initially generated my project skeleton, it had added some numbers on at the end.
<widget id="com.ionicframework.tweethours24237" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
*snip*
All it took to fix my Ionic icon problem was to remove these numbers.
As soon as I did that, my icon changed to what I expected:
Result!
Splash Screen Solution
Unfortunately, this didn’t fix my splash screen issue.
But, as above, I had correctly generated the splash screen so this was a little puzzling. Everything seemed ok – and I did see the 3 seconds of white / blank / emptiness that implied the splash screen code was actually executing, just missing the expected image.
To fix this I added the cordova-plugin-splashscreen
as mentioned here.
Remember to update your package.json
file whenever you add a plugin, so you or your colleagues aren’t caught out by a missing plugin at some point in the future.
# /packages.json
*snip*
"cordovaPlugins": [
"cordova-plugin-splashscreen",
*snip*
To make this work I also needed to update my .run
method:
# /www/js/app.js
.run(function($rootScope, $ionicPlatform, $cordovaSplashscreen){
setTimeout(function() {
$cordovaSplashscreen.hide()
}, 3000);
After that, my splash screen worked as expected:
And finally, I was done 🙂
For reference, here is my ionic info
on the off chance this is useful:
Cordova CLI: 5.0.0 Gulp version: CLI version 3.8.1 Gulp local: Local version 3.8.11 Ionic Version: 1.0.0 Ionic CLI Version: 1.4.6-beta.0 Ionic App Lib Version: 0.0.22 ios-deploy version: Not installed ios-sim version: 3.1.1 OS: Mac OS X Yosemite Node Version: v0.12.4 Xcode version: Xcode 6.3.1 Build version 6D1002
Also, my base image sizes are as follows:
icon.png – 768px x 768px
splash.png – 2208px x 2208px
I also used this splash template – just make sure you get everything between the green grid lines, or you will get unwanted clipping on smaller screen sizes.
I’ve never commented on a random blog before, but this is worth it. Thank you very much for this advice, this helped me with this issue! Hope you had a great start in 2016!
Best Regards,
Fabian
Thanks Fabian, you are welcome 🙂 Happy to have helped.
How to disable default Splash Screen ionic 3
I’m not sure sorry, I haven’t used Ionic 3. Leaving this here for others to offer a solution.
I did everything mentioned in your blog but still splashscreen is not coming in my android build. I haven’t checked the ios build yet.
My Ionic info :
Cordova CLI: 6.0.0
Ionic Version:1.2.4-nightly-1917
Ionic CLI Version: 1.7.14
OS: Windows 7 SP1
Node Version: v0.12.2
You can also use tools to generate the files. I created a NodeJS repo to facilitate the icon and splash screen generation for Ionic. So everyone can create all .png files in seconds. https://github.com/dericeira/Icon-Splash-Resize
Cool, thanks for sharing.
Thanks so, so much for posting this. I’ve been wanting very badly to share my app on social media, but I just couldn’t bring myself to do it while it was still showing that God forsaken default icon.
Thanks for this!
Probrably saved me hours of trial and error and research…
$ ionic resources Not working with this config.
Cordova CLI: 6.3.1
Ionic CLI Version: 2.1.12
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v4.4.7
Xcode version: Not installed
I haven’t used Ionic in well over a year, so unfortunately have no helpful pointers on this one.
I have the same problem, my android build is stuck with the cordova default icon, not the icons I provide using ionic resources. Any iOS build looks fine but I cannot get the icons into android. Changing the widget name as suggested here has not helped.
Any other ideas to “unstuck” the android icon?
Thanks!
Z.
Hi Zvi, did you find a solution ?
I’m havind a similar probleme. Each time I ihave the ionic default icon & splashscreen .. quite disturbing
Try the suggestion at: https://github.com/driftyco/ionic-cli/issues/420#issuecomment-266391323
Worked for me.
@Joris thanks, buddy! This is the right answer for me. After upgraded to 6.1.0, the default icon on android finally works!
This helps me a lot! Thanks.
Thank dear..You save my another day..Thanks a lot…
One year and more later, this saved someone else a huge deal of time .
Thanks a bunch !
Awesome, glad it’s still relevant 🙂