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):
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):
- 4 Posts
- 0 Reply Likes
Posted 5 years ago
- 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>- 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?
Any thoughts?
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.
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.
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
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
- 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?
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?
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.
- 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?
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>
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:
!!! Use .pgbomit in the /res directory !!!
- 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 !!!
- 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
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?
<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?
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.
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.
- 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
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
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Sure.
I won't be online all the time, though. Feedback may take a bit.
I won't be online all the time, though. Feedback may take a bit.
- 17 Posts
- 0 Reply Likes
Ye no problem I am going home now. Will be back tomorrow :)
- 17 Posts
- 0 Reply Likes
Ok so I updated the android icons
Also, I've noticed that outside my platform tags there is this line:
Is that needed or should I delete it?
<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?
Petra V., Champion
- 7794 Posts
- 1391 Reply Likes
Config looks good.
===
According to the PGB Docs, the "default icon" should reside in the root:
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.
===
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.
- 17 Posts
- 0 Reply Likes
Ye I also noticed that. I'll put that in. Thank you so much for all your help!!
Related Categories
-
PhoneGap Build
- 15111 Conversations
- 275 Followers



