14 Replies Latest reply on Dec 23, 2016 11:11 AM by kerrishotts

    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 1

              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.