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

6
votes

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?

3
ioscordovaionic-frameworkicons
Can you give the file structure(project structure) for iOS, In android path will relative and in iOS path will absolute. So if you give the path as like android it wont work in iOS. – NGB
So, as for as structure goes, the resources folder is at the top level of the project. So I don't know if it will make a difference because they will both traverse down from the same level (whether it's absolute or relative). Would I be correct in assuming that? – AndrewK
resources file is beside to the config.xml? according to your path in config.xml. And main thing '/' '\' these symbols matters – NGB
I could literally kiss you on the mouth right now. I'm using Visual Studio in Windows and Windows automatically makes '\' instead of '/', but I'm compiling it on a remote server on my Mac so it was silently failing. I literally spent days on this. Thank you. – AndrewK
You can upvote my comment – NGB

3 Answers

7
votes

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"/>
2
votes

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();
0
votes

Check this:

The icon image's minimum dimensions should be 192x192 px.

The splash image's minimum dimensions should be 2208x2208 px.

if smaller than the minimum dimensions,ionic resources will not work.