Cordova ios icon (and splashscreen) not showing with Ionic resources

Question

I know there have been a number of posts about this, but none of them are working. My android platform is working perfectly, and shows the app icon and splashscreen, but the ios platform refuses to show them. I tried a number of different folder locations, and I used ionic resources to auto generate the image files and place them in the correct folders and to populate the config.xml, which should work. I don't even know where the app gets the Cordova robot image from, I can't find it anywhere. I have run cordova platform rm ios && cordova platform add ios and ionic platform rm ios && ionic platform add ios, but to no avail. I am using Cordova 6.1.1 with Ionic.

This is what is auto-generated in config.xml:

<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
  <platform name="ios">
    <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
    <icon src="resources\ios\icon\icon.png" width="57" height="57"/>
    <icon src="resources\ios\icon\[email protected]" width="114" height="114"/>
    <icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
    <icon src="resources\ios\icon\[email protected]" width="80" height="80"/>
    <icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
    <icon src="resources\ios\icon\[email protected]" width="100" height="100"/>
    <icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
    <icon src="resources\ios\icon\[email protected]" width="120" height="120"/>
    <icon src="resources\ios\icon\[email protected]" width="180" height="180"/>
    <icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
    <icon src="resources\ios\icon\[email protected]" width="144" height="144"/>
    <icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
    <icon src="resources\ios\icon\[email protected]" width="152" height="152"/>
    <icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
    <icon src="resources\ios\icon\[email protected]" width="58" height="58"/>
    <icon src="resources\ios\icon\[email protected]" width="87" height="87"/>
    <splash src="resources\ios\splash\Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources\ios\splash\Default-667h.png" width="750" height="1334"/>
    <splash src="resources\ios\splash\Default-736h.png" width="1242" height="2208"/>
    <splash src="resources\ios\splash\Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources\ios\splash\Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources\ios\splash\Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources\ios\splash\Default~iphone.png" width="320" height="480"/>
  </platform>
  <platform name="android">
    <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-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"/>
  </platform>

Why would this work on android and not ios? Everyone seems to find an answer to their problem, but there doesn't seem to be a universal answer. I need it launched very soon and I can't launch it without its proper app icon. Can anyone give any suggestions?

Answer 1

Nauveen found the bug. If you are using Visual Studio in Windows and compiling it on a remote server on a Mac, Windows will use backslashes instead of forward slashes. This is correct for Android, but iOS will need you to convert the backslashes to forward slashes to find the correct path to the images. Here is how the auto-generated files in your config.xml file should look if you are compiling Android in Windows and iOS on a remote Mac:

<icon src="resources\android\icon\drawable-xhdpi-icon.png"/>
  <platform name="ios">
    <preference name="KeyboardDisplayRequiresUserAction" value="false"/>
    <icon src="resources/ios/icon/icon.png" width="57" height="57"/>
    <icon src="resources/ios/icon/[email protected]" width="114" height="114"/>
    <icon src="resources/ios/icon/icon-40.png" width="40" height="40"/>
    <icon src="resources/ios/icon/[email protected]" width="80" height="80"/>
    <icon src="resources/ios/icon/icon-50.png" width="50" height="50"/>
    <icon src="resources/ios/icon/[email protected]" width="100" height="100"/>
    <icon src="resources/ios/icon/icon-60.png" width="60" height="60"/>
    <icon src="resources/ios/icon/[email protected]" width="120" height="120"/>
    <icon src="resources/ios/icon/[email protected]" width="180" height="180"/>
    <icon src="resources/ios/icon/icon-72.png" width="72" height="72"/>
    <icon src="resources/ios/icon/[email protected]" width="144" height="144"/>
    <icon src="resources/ios/icon/icon-76.png" width="76" height="76"/>
    <icon src="resources/ios/icon/[email protected]" width="152" height="152"/>
    <icon src="resources/ios/icon/icon-small.png" width="29" height="29"/>
    <icon src="resources/ios/icon/[email protected]" width="58" height="58"/>
    <icon src="resources/ios/icon/[email protected]" width="87" height="87"/>
    <splash src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="resources/ios/splash/Default-667h.png" width="750" height="1334"/>
    <splash src="resources/ios/splash/Default-736h.png" width="1242" height="2208"/>
    <splash src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="resources/ios/splash/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="resources/ios/splash/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="resources/ios/splash/Default~iphone.png" width="320" height="480"/>
  </platform>
  <platform name="android">
    <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-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"/>

Answer 2

Try installing this plugin

cordova-plugin-splashscreen

run cordova plugin add cordova-plugin-splashscreen

Then inside ypur config.xml add these lines (not inside platform ios or android rather with other preferences).

  <preference name="SplashScreenDelay" value="30000"/>
  <preference name="AutoHideSplashScreen" value="true"/>
  <preference name="FadeSplashScreen" value="false"/>
  <preference name="ShowSplashScreenSpinner" value="false"/>

Then in your app.run function inside ionic platform ready add these lines

 if(navigator && navigator.splashscreen) navigator.splashscreen.hide();