Why doesn't custom icon show up in built app?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I've followed the guidelines for replacing the default PhoneGap icon (a robot) with my own. I do not build locally but use build.phonegap.com. The three platforms seem to be working but the custom icon and splashscreen almost never work as expected.

Assumptions/notes:
For what it's worth I've turned on Hydration
* PhoneGap build 3.7.0

Observations:
* When debugging using the PhoneGap Development tool if you don't *also* copy icon.png to the appdir itself then the tool will indicate a broken link. I'd call this a bug in the development tool since the icon is supposed to be in the appdir/www folder.
* In the build.phonegap.com console it appears to find the custom icon and displays it in two different places there: 1) at the main screen for your app and 2) under Settings -> Configuration.
* Building the app online for iOS/Android/Winphone, however, results in IPA/APK/XAP files which are zipped up with the wrong icon and splashscreen files. So the build part for this is failing to include the correct content.

Process:
1. Build
2. Download appropriate built file (IPA/APK/XAP)
3. Rename file with .ZIP extension and extract all contents
4. Review any graphics files, noting that it doesn't work correctly for any platform
a. XAP file includes /ApplicationIcon.png, /Background.png and /SplashScreenImage.png, all of which are the default robot
b. IPA file includes many PNG graphics under /Payload/MyappApp.app which are all black in content. None of the files appear to be the robot and yet on an iPad device it shows a grid with an X and three superimposed circles rather than my icon. The splash screen is the robot rather than my custom splash screen.
c. APK file includes several /res/Drawable*/icon.png files which are the robot rather than my custom icon file.

Config.xml (pertinent lines):
Photo of Michael

Michael

  • 4 Posts
  • 0 Reply Likes

Posted 5 years ago

  • 1
Photo of Michael

Michael

  • 4 Posts
  • 0 Reply Likes
<icon src="icon.png" width="128" height="128" />
<platform name="android">
<icon src="www/icon.png" density="ldpi" />
<icon src="www/icon.png" density="mdpi" />
<icon src="www/icon.png" density="hdpi" />
<icon src="www/icon.png" density="xhdpi" />
<splash src="www/icon.png" density="land-hdpi"/>
<splash src="www/icon.png" density="land-ldpi"/>
<splash src="www/icon.png" density="land-mdpi"/>
<splash src="www/icon.png" density="land-xhdpi"/>
<splash src="www/icon.png" density="port-hdpi"/>
<splash src="www/icon.png" density="port-ldpi"/>
<splash src="www/icon.png" density="port-mdpi"/>
<splash src="www/icon.png" density="port-xhdpi"/>
</platform>
<platform name="ios">
<icon src="www/icon.png" width="180" height="180" />
<icon src="www/icon.png" width="60" height="60" />
<icon src="www/icon.png" width="120" height="120" />
<icon src="www/icon.png" width="76" height="76" />
<icon src="www/icon.png" width="152" height="152" />
<icon src="www/icon.png" width="40" height="40" />
<icon src="www/icon.png" width="80" height="80" />
<icon src="www/icon.png" width="57" height="57" />
<icon src="www/icon.png" width="114" height="114" />
<icon src="www/icon.png" width="72" height="72" />
<icon src="www/icon.png" width="144" height="144" />
<icon src="www/icon.png" width="29" height="29" />
<icon src="www/icon.png" width="58" height="58" />
<icon src="www/icon.png" width="50" height="50" />
<icon src="www/icon.png" width="100" height="100" />
<splash src="www/icon.png" width="320" height="480"/>
<splash src="www/icon.png" width="640" height="960"/>
<splash src="www/icon.png" width="768" height="1024"/>
<splash src="www/icon.png" width="1536" height="2048"/>
<splash src="www/icon.png" width="1024" height="768"/>
<splash src="www/icon.png" width="2048" height="1536"/>
<splash src="www/icon.png" width="640" height="1136"/>
<splash src="www/icon.png" width="750" height="1334"/>
<splash src="www/icon.png" width="1242" height="2208"/>
<splash src="www/icon.png" width="2208" height="1242"/>
</platform>
<platform name="winphone">
<icon src="www/icon.png"/>
<splash src="www/icon.jpg"/>
</platform>
Photo of Michael

Michael

  • 4 Posts
  • 0 Reply Likes
Okay, I removed every "www/" in the config.xml file above, deleted the app on all three devices, re-installed. It now has the correct icon file displayed. At the Hydration step, though, it still displays the robot for the splashscreen.

Any thoughts?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You are using Cordova syntax, not Phonegap Build.

Remove the platform elements, make use of the gap: namespace for splash screens, and add the gap:platform attribute.

Make sure to use PGB docs, not Phonegap.
Photo of JesseMonroy650 (Volunteer)

JesseMonroy650 (Volunteer), Champion

  • 3325 Posts
  • 122 Reply Likes
@Michael,
As Petra alluded to, you are using the wrong set of docs.

For Phonegap Build use:
Icons and Splash Screens
http://docs.build.phonegap.com/en_US/configuring_icons_and_splash.md.html#Icons%20and%20Splash%20Screens

Here is an example:
https://github.com/phonegap/phonegap-start/blob/master/www/config.xml

You may also want to read:
Top Mistakes by Developers new to Cordova/Phonegap
https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md
Read #1, #2, #6 & #7

Best of Luck
Jesse
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Sorry to open an old topic but I just have a quick question and didn't want to start a whole topic for it.

If I want to specify different sizes of icons, do I need to have each of those files physically in the root of my application or is it enough to just have icon.png and PGB will generate the relevant files for me as specified in config.xml?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
You will have to supply each graphics file separately, but they need not be located at the root.
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Ah so in my root (where index.html and configxml are) I can create a folder called res and then a folder for android and ios and have all the files in there.

And then use this syntax for specifying them?

<platform name="ios">
<icon src="icon.png" gap:platform="ios" width="57" height="57"/>
</platform>

<platform name="android">
<icon src="icon.png" gap:platform="android" gap:qualifier="ldpi"/>
</platform>
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Yes. Each icon should, of course, have
- its own path/filename
- image type image/png, (except the splash for winphone, I think)
- the exact correct dimensions, especially important for iOS

In your above example, you can omit the gap:platform attribute, because you already specified with a platform element.
You should, however, specify the path from the root

In your case, with your directories, it would be:

<platform name="ios">
<icon src="res/iosicons/icon26.png" width="26" height="26"/>
<icon src="res/iosicons/icon57.png" width="57" height="57"/>
<icon src="res/iosicons/icon80.png" width="80" height="80"/>
...etc...
</platform>

<platform name="android">
<icon src="res/androidicons/iconl.png" qualifier="ldpi"/>
<icon src="res/androidicons/iconm.png" qualifier="mdpi"/>
<icon src="res/androidicons/iconh.png" qualifier="hdpi"/>
...etc...
</platform>


!!! Use .pgbomit in the /res directory !!!
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
So this is what my config.xml looks like now. I run "ionic resources" and it created this for me


<platform name="ios">
<icon src="resources\ios\icon\icon.png" width="57" height="57"/>
<icon src="resources\ios\icon\icon@2x.png" width="114" height="114"/>
<icon src="resources\ios\icon\icon-40.png" width="40" height="40"/>
<icon src="resources\ios\icon\icon-40@2x.png" width="80" height="80"/>
<icon src="resources\ios\icon\icon-50.png" width="50" height="50"/>
<icon src="resources\ios\icon\icon-50@2x.png" width="100" height="100"/>
<icon src="resources\ios\icon\icon-60.png" width="60" height="60"/>
<icon src="resources\ios\icon\icon-60@2x.png" width="120" height="120"/>
<icon src="resources\ios\icon\icon-60@3x.png" width="180" height="180"/>
<icon src="resources\ios\icon\icon-72.png" width="72" height="72"/>
<icon src="resources\ios\icon\icon-72@2x.png" width="144" height="144"/>
<icon src="resources\ios\icon\icon-76.png" width="76" height="76"/>
<icon src="resources\ios\icon\icon-76@2x.png" width="152" height="152"/>
<icon src="resources\ios\icon\icon-small.png" width="29" height="29"/>
<icon src="resources\ios\icon\icon-small@2x.png" width="58" height="58"/>
<icon src="resources\ios\icon\icon-small@3x.png" 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"/>
</platform>


With the . pgbomit file, do I need to specify anything inside it or is it enough that a file with that name exists in the /resources directory?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Ionic is rubbish. It doesn't even know the difference between / and \

And the .pgbomit file can be empty.

Btw: you can't use the density attribute that way! See the Icons and Splashscreens section of the PGB Docs.
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Ah yes, I need to change it to "qualifier". And ye I just noticed the / were the wrong way around!

I have managed to get iOS and Android working now, icons show up fine, but I will go through and fix them up.

Can I post my config.xml after I make the changes for you to confirm it is ok for PGB? My problem is that I am still getting confused between ionic and PGB syntax
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Sure.
I won't be online all the time, though. Feedback may take a bit.
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Ye no problem I am going home now. Will be back tomorrow :)
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Ok so I updated the android icons


<platform name="android">
<icon src="resources/android/icon/drawable-ldpi-icon.png" qualifier="ldpi"/>
<icon src="resources/android/icon/drawable-mdpi-icon.png" qualifier="mdpi"/>
<icon src="resources/android/icon/drawable-hdpi-icon.png" qualifier="hdpi"/>
<icon src="resources/android/icon/drawable-xhdpi-icon.png" qualifier="xhdpi"/>
<icon src="resources/android/icon/drawable-xxhdpi-icon.png" qualifier="xxhdpi"/>
<icon src="resources/android/icon/drawable-xxxhdpi-icon.png" qualifier="xxxhdpi"/>
<splash src="resources/android/splash/drawable-port-ldpi-screen.png" qualifier="port-ldpi"/>
<splash src="resources/android/splash/drawable-port-mdpi-screen.png" qualifier="port-mdpi"/>
<splash src="resources/android/splash/drawable-port-hdpi-screen.png" qualifier="port-hdpi"/>
<splash src="resources/android/splash/drawable-port-xhdpi-screen.png" qualifier="port-xhdpi"/>
<splash src="resources/android/splash/drawable-port-xxhdpi-screen.png" qualifier="port-xxhdpi"/>
<splash src="resources/android/splash/drawable-port-xxxhdpi-screen.png" qualifier="port-xxxhdpi"/>
</platform>


Also, I've noticed that outside my platform tags there is this line:


<icon src="resources/android/icon/drawable-xhdpi-icon.png"/>


Is that needed or should I delete it?
Photo of Petra V.

Petra V., Champion

  • 7794 Posts
  • 1391 Reply Likes
Config looks good.
===
According to the PGB Docs, the "default icon" should reside in the root:
<icon src="icon.png"/>
I have never found out what that default icon is intended for. I just have one (120x120) in all my apps, shrug and leave such thing included, whether it is needed or not.
Photo of Damian Fibuch

Damian Fibuch

  • 17 Posts
  • 0 Reply Likes
Ye I also noticed that. I'll put that in. Thank you so much for all your help!!