21 Replies Latest reply on Aug 16, 2017 8:21 AM by RG2

    PhoneGap Build - cli-6.3.0 gives wrong icon for IOS

    chinumca

      I am building the app using https://build.phonegap.com.

       

      When using cli 6.3.0 for building an app results in the failure to override default icon in IOS version. the icon is specified in the config.xml file.

       

      Couple of days ago, I used cli 5.4.1 to build the app and icon shown properly on IOS devices

      is there a solution for cli 6.3.0 to fix this or can I change the version to 5.4.1 while build.

       

        • 1. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
          VectorP Level 4

          Yes, you can use a lower version, using the 'phonegap-version' preference.

          However, the correct icons should show (except 29x29@3 and 167x167, for which a bug report is still open).

          If they don't, please

          - post your config.xml here, so forum participants can find errors

          - confirm that you have both index.html and config.xml in the root directory of your zip file.

          • 2. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
            chinumca Level 1

            Add below line to config.xml.

            <preference name="phonegap-version" value="cli-5.4.1" />

            • 3. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
              martinb77004568 Level 2

              Where can I find the bug report VectorP mentioned? (I just wanted to keep updated - I don't like to see the default 29x29@3 icon :-) )

              • 5. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                gsdrackspace

                I've got the same problem as this. It had the correct push icon with 5.4.1 but 6.x does not.

                 

                I can't just revert ad build with 5.4.1 because another plugin we are implementing requires 6.x

                • 6. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                  Gary__F Level 1

                  Same problem here. Push icon showing on as default PGB icon when cli-6.3.0 is used but my custom icon is used with 5.4.1 or lower. Adobe said a fix was made in prd 4 days ago but I've rebuilt just now and the bug is still there.

                  • 7. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                    oscara51041274 Level 1

                    Same problem here too... Can anyone confirm if this is fixec in PGB   using cli-6.3.0?

                    • 8. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                      Gary__F Level 1

                      Adobe - please can we have an update on this bug which still persists in 6.3.0?

                       

                      I was told to open a new thread about it which I did but no one has responded to that either. :-(

                      Push icon not working for iOS in 6.3.0

                       

                      Thank you.

                      • 9. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                        vangroover Adobe Employee

                        App Icon - Graphics - iOS Human Interface Guidelines

                         

                        the icons are here: 

                         

                        120px by 120px 

                        87px by 87px

                        80px by 80px 

                        58px by 58px

                         

                        please ensure these icons are in the cli-6.3.0 build

                        1 person found this helpful
                        • 10. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                          stephena27889904

                          guys i had the same problem and fixed this by adding the new icon sizes to my 6.3 config.xml

                           

                          *all iphone icon sizes for 6.3 are below"

                           

                              <icon src="www/res/icon/ios/icon.png" platform="ios" width="57" height="57"/>

                              <icon src="www/res/icon/ios/icon@2x.png" platform="ios" width="114" height="114"/>

                              <icon src="www/res/icon/ios/icon-40.png" platform="ios" width="40" height="40"/>

                              <icon src="www/res/icon/ios/icon-40@2x.png" platform="ios" width="80" height="80"/>

                              <icon src="www/res/icon/ios/icon-50.png" platform="ios" width="50" height="50"/>

                              <icon src="www/res/icon/ios/icon-50@2x.png" platform="ios" width="100" height="100"/>

                              <icon src="www/res/icon/ios/icon-60.png" platform="ios" width="60" height="60"/>

                              <icon src="www/res/icon/ios/icon-60@2x.png" platform="ios" width="120" height="120"/>

                              <icon src="www/res/icon/ios/icon-60@3x.png" platform="ios" width="180" height="180"/>

                              <icon src="www/res/icon/ios/icon-72.png" platform="ios" width="72" height="72"/>

                              <icon src="www/res/icon/ios/icon-72@2x.png" platform="ios" width="144" height="144"/>

                              <icon src="www/res/icon/ios/icon-76.png" platform="ios" width="76" height="76"/>

                              <icon src="www/res/icon/ios/icon-76@2x.png" platform="ios" width="152" height="152"/>

                              <icon src="www/res/icon/ios/icon-small.png" platform="ios" width="29" height="29"/>

                              <icon src="www/res/icon/ios/icon-small@2x.png" platform="ios" width="58" height="58"/>

                              <icon src="www/res/icon/ios/icon-small@3x.png" platform="ios" width="87" height="87"/>

                          • 11. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                            itcxp29572386

                            Hi, I have the same problem. After to update phonegap 5.x to 6.3, the icons not working in iOS.

                            I copy the code config.xml:

                             

                                <!-- GENERAL preferences -->

                                <!-- <preference name="phonegap-version" value="cli-5.2.0" /> -->

                                <preference name="phonegap-version" value="cli-6.3.0" />

                                <preference name="orientation" value="default" />

                                <preference name="fullscreen" value="false" />

                                <preference name="permissions" value="none" />

                                <preference name="webviewbounce" value="true" />

                                <preference name="stay-in-webview" value="false" />

                                <preference name="show-splash-screen-spinner" value="true" />

                                <preference name="auto-hide-splash-screen" value="true" />

                                <preference name="disable-cursor" value="false" />

                             

                             

                                <!-- IOS preferences only -->

                                <preference name="target-device" value="universal" />

                                <preference name="prerendered-icon" value="false" />

                                <preference name="detect-data-types" value="true" />

                                <preference name="exit-on-suspend" value="false" />

                                <preference name="ios-statusbarstyle" value="black-opaque" />

                             

                             

                                <!-- ANDROID preferences only -->

                                <preference name="android-minSdkVersion" value="7" />

                                <preference name="android-installLocation" value="auto" />

                             

                             

                                <!-- PLUGINS -->

                                <gap:plugin name="cordova-plugin-dialogs" source="npm" />

                                <gap:plugin name="cordova-plugin-globalization" source="npm" />

                                <gap:plugin name="cordova-plugin-network-information" source="npm" />

                                <gap:plugin name="cordova-plugin-splashscreen" source="npm" />

                                <gap:plugin name="cordova-plugin-vibration" source="npm" />

                             

                             

                                <icon src="icon.png" />

                                <icon gap:platform="android" gap:qualifier="ldpi" src="images/res/icon/android/icon-36-ldpi.png" />

                                <icon gap:platform="android" gap:qualifier="mdpi" src="images/res/icon/android/icon-48-mdpi.png" />

                                <icon gap:platform="android" gap:qualifier="hdpi" src="images/res/icon/android/icon-72-hdpi.png" />

                                <icon gap:platform="android" gap:qualifier="xhdpi" src="images/res/icon/android/icon-96-xhdpi.png" />

                                <icon gap:platform="blackberry" src="images/res/icon/blackberry/icon-80.png" />

                                <icon gap:platform="blackberry" gap:state="hover" src="images/res/icon/blackberry/icon-80.png" />

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

                                <icon gap:platform="ios" height="72" src="images/res/icon/ios/icon-72.png" width="72" />

                                <icon gap:platform="ios" height="114" src="images/res/icon/ios/icon-57-2x.png" width="114" />

                                <icon gap:platform="ios" height="144" src="images/res/icon/ios/icon-72-2x.png" width="144" />

                                <icon gap:platform="webos" src="images/res/icon/webos/icon-64.png" />

                                <icon gap:platform="winphone" src="images/res/icon/windows-phone/icon-48.png" />

                                <icon gap:platform="winphone" gap:role="background" src="images/res/icon/windows-phone/icon-173-tile.png" />

                             

                             

                                <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="images/res/screen/android/screen-ldpi-portrait.png" />

                                <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="images/res/screen/android/screen-mdpi-portrait.png" />

                                <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="images/res/screen/android/screen-hdpi-portrait.png" />

                                <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="images/res/screen/android/screen-xhdpi-portrait.png" />

                                <gap:splash gap:platform="blackberry" src="images/res/screen/blackberry/screen-225.png" />

                                <gap:splash gap:platform="ios" height="480" src="images/res/screen/ios/screen-iphone-portrait.png" width="320" />

                                <gap:splash gap:platform="ios" height="960" src="images/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />

                                <gap:splash gap:platform="ios" height="1136" src="images/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />

                                <gap:splash gap:platform="ios" height="1024" src="images/res/screen/ios/screen-ipad-portrait.png" width="768" />

                                <gap:splash gap:platform="ios" height="768" src="images/res/screen/ios/screen-ipad-landscape.png" width="1024" />

                                <gap:splash gap:platform="winphone" src="images/res/screen/windows-phone/screen-portrait.png" />

                             

                             

                                <!-- This plugin implements a whitelist policy for navigating the application webview on Cordova -->

                                <gap:plugin name="cordova-plugin-whitelist" source="npm"/>

                             

                             

                                <!-- Network Request Whitelist -->

                                <access origin="*" />

                             

                             

                                <!-- Navigation Whitelist -->

                                <allow-navigation href="*" />

                             

                             

                                <!-- Intent Whitelist -->

                                <allow-intent href="http://*/*" />

                                <allow-intent href="https://*/*" />

                                <allow-intent href="tel:*" />

                                <allow-intent href="sms:*" />

                                <allow-intent href="mailto:*" />

                                <allow-intent href="geo:*" />

                             

                             

                                <platform name="android">

                                    <allow-intent href="market:*" />

                                </platform>

                                <platform name="ios">

                                    <allow-intent href="itms:*" />

                                    <allow-intent href="itms-apps:*" />

                                </platform>

                                <platform name="winphone"/>

                             

                             

                                <engine name="android" spec="^4.0.0" />

                                <engine name="ios" spec="^3.8.0" />

                            • 12. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                              Gary__F Level 1

                              itcxp29572386, you are missing out loads of sizes that iOS devices require. See the post just before yours from Stephen.

                               

                              It's just bad planning from Apple that with each new device they require new icons and splash screens. If you miss one out you will get the default PGB icon in its place. I have no idea why Apple can't use the highest resolution graphic and resize it on the fly. Apps are about 1MB larger than they need to be because of all the unused images for any one phone model.

                               

                              Failing any thoughtfulness from Apple, it would be cool if PGB only required 1 high res icon and splash screen and it automatically generated all the icons and splash screens required and added the lines to the config.xml too.

                              • 13. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                itcxp29572386 Level 1

                                Excelent support.

                                 

                                Yes, I dont understand why Apple does not automate the service icons.

                                 

                                For now you have to customize each icon. I copy the link of the sizes that nowadays request and that work in phonegap version 6.3.0.

                                 

                                Launch Screen - Graphics - iOS Human Interface Guidelines

                                 

                                Thank you very much

                                • 14. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                  kerrishotts Adobe Community Professional

                                  Apple is progressing in that direction with two different fronts:

                                   

                                  • launch storyboards: for native apps, this replicates your initial view, and scales using auto layout. For hybrid apps, support is in cordova-ios@4.3.1 (but not available in PGB yet, 4.3.0 is the latest IIRC). Hybrid apps, however, will only use images (no third-party storyboard designer), but if you're careful with your design, you'll be able to use a single image for all supported devices. See the docs for the splashscreen plugin: Splashscreen - Apache Cordova
                                  • app assets can be generated from PDFs when using Xcode, but this isn't supported for app icons yet. I don't know if Apple will ever support that or not. And if they did, I don't know if PGB would or not.

                                   

                                  As to why Apple doesn't necessarily automate this, there's a good reason, especially for app icons. Different sizes are used in different contexts, which may need additional customization in order to ensure legibility. Furthermore, by requiring you to specify each icon size, it (ideally) forces you to think about whether or not scaling is appropriate or not for that particular use case or if you need to make additional tweaks.

                                  • 15. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                    canados Level 1

                                    Hello everyone,
                                    I think the problem is back, at least for me. The cli I am using is cli-6.5.0 (4.3.1 / 6.1.2 / 4.4.3)
                                    My app keeps being rejected by apple app store team.

                                    After some investigation I discovered that no matter how much icon I add in the config.xml, the IPA file contains only the default cordova ones.

                                    I did a test with a previous IPA which I compiled last october 2016, and with a compile I did today
                                    Here is the result after extracting all assets from both IPAsipa-icons.jpg

                                     

                                    As you can see my previous build contains my icons, ( and other default cordova as well )
                                    but the new build, contains only the default ones.

                                    My questions is, how can I fix this ? Is the problem from my side, or is the problem from the PGB compiling process ?

                                    thanks

                                    Here is my icon list ( I also tried without gap: )

                                    <icon gap:platform="ios" src="res/icons/ios/icon-20-2x.png" width="40" height="40"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-29-2x.png" width="58" height="58"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-20-3x.png" width="60" height="60"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-60.png" width="60" height="60"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-72.png" width="72" height="72" />

                                        <icon gap:platform="ios" src="res/icons/ios/icon-40-2x.png" width="80" height="80" />

                                        <icon gap:platform="ios" src="res/icons/ios/icon-29-3x.png" width="87" height="87" />

                                        <icon gap:platform="ios" src="res/icons/ios/icon-60-2x.png" width="120" height="120"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-40-3x.png" width="120" height="120" />

                                        <icon gap:platform="ios" src="res/icons/ios/icon-72-2x.png" width="144" height="144"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-76-2x.png" width="152" height="152"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-83.5-2x.png" width="167" height="167"/>

                                        <icon gap:platform="ios" src="res/icons/ios/icon-60-3x.png" width="180" height="180"/>

                                    <icon gap:platform="ios" src="res/icons/ios/icon-512.png" width="512" height="512"/>

                                    • 16. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                      kerrishotts Adobe Community Professional

                                      I wouldn't use the gap: namespace -- instead put those icons under a <platform name="ios"> tag and see if that improves. A few other quick thoughts:

                                       

                                      - Make sure the icons themselves match the specified width and height exactly (if they don't, problems can occur)

                                      - Make sure the src path is reachable from config.xml (paths are relative to config.xml's location)

                                      - Make sure there are no case differences in your path and filenames

                                      • 17. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                        canados Level 1

                                        Hello kerrishotts

                                         

                                        Thank you for  your reply,
                                        As I mentioned in my previous message I also tested without the  gap: namespace.
                                        I already checked the names the sizes and  the cases

                                         

                                        As I also mentioned in  my  previous message, the same code and references were working in October 2016,
                                        I did not changed anything on  my icons,  icons names, icons path etc ...

                                         

                                        There is something to investigate with the phonegap build. ( since it was working fine in previous compilation )

                                         

                                        Thanks

                                        • 18. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                          canados Level 1

                                          before I used  to  upload the www.zip file.
                                          And today I also tried the repo method, but I have the same issue.
                                          do you need my application # ?

                                           

                                          Thanks

                                          • 19. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                            vangroover Adobe Employee

                                            hmmm ... the config.xml says res/icons/ios but the real path is res/icon/ios in the app.

                                            • 20. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                              canados Level 1

                                              Ahhhh Thank you vangroover you spotted my mistake.
                                              I recompiled and opened the ipa and now all the icon are the correct ones

                                               

                                               

                                              The only thing remaining is the config.xml present at the root of Payload, it has a default hello cordova options

                                               

                                               

                                              <widget id='io.cordova.helloCordova' version='2.0.0' xmlns='http://www.w3.org/ns/widgets'>

                                                  <name>

                                                      HelloCordova

                                                  </name>

                                                  <description>

                                                       A sample Apache Cordova application that responds to the deviceready

                                                      event.

                                                  </description>

                                                  <author email='dev@cordova.apache.org' href='http://cordova.io'>

                                                       Apache Cordova Team

                                                  </author>

                                               

                                              is that normal ?
                                              Thanks a lot for your correction

                                              • 21. Re: PhoneGap Build - cli-6.3.0 gives wrong icon for IOS
                                                RG2

                                                I am having a similar problem  but it seems to be random. My last build a few weeks ago worked fine but without making any changes to my app config except for the version number the icons are replaced with generic on next build,  This has happened several times in the last few months. Using version cli 6.3.0. Is there a fix?