Fixing Ionic Icon and Splashscreen Being Stuck as Default

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.

Ionic default icon on Android
Ionic default icon on Android

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:

Ionic icon on Android displaying as expected
Ionic icon on Android displaying as 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:

Custom Ionic Splash Screen on Android
Custom Ionic Splash Screen on Android

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.

Published by

Code Review

CodeReviewVideos is a video training site helping software developers learn Symfony faster and easier.

19 thoughts on “Fixing Ionic Icon and Splashscreen Being Stuck as Default”

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

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

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

  4. $ 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

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

  6. Hi Zvi, did you find a solution ?
    I’m havind a similar probleme. Each time I ihave the ionic default icon & splashscreen .. quite disturbing

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.