19 Replies Latest reply on Aug 11, 2016 12:49 PM by kerrishotts

    how to replace the default icon to my own


      Image result for phonegap icon

      How do I replace this icon to my own preference?

        • 1. Re: how to replace the default icon to my own
          kerrishotts Adobe Employee

          Which service are you using to build your app? PhoneGap Build, PhoneGap CLI, or Cordova CLI?


          The documentation on Customize app icons - Apache Cordova should give you a good start.

          • 4. Re: how to replace the default icon to my own

            Is it possible to change icon through adobe phone gap build free account ?

            • 5. Re: how to replace the default icon to my own
              VectorP Level 4


              Kerri already mentioned the relevant docs.

              If you don't succeed, the odds are that your config isn't found and/or parsed.

              - make sure both index.html and config.xml are in the same (root) directory of your zip file

              - make sure your config validates as well-formed XML

              • 6. Re: how to replace the default icon to my own
                Chris W. Griffith Adobe Community Professional

                And there is also my free utility, ConfiGAP .  This tool can assist you in generating your config.xml file.



                1 person found this helpful
                • 7. Re: how to replace the default icon to my own

                  it doesn't help. The default splash is showing, but the icon remains phonegap

                  and the link in the answer is 404

                  • 8. Re: how to replace the default icon to my own
                    VectorP Level 4

                    1. Please post your config.xml

                    2. Please confirm that you have both index.html and config.xml in the root directory of your zip file for PGB

                    • 9. Re: how to replace the default icon to my own
                      Holoduker Level 1

                      config.xml, index.html and icon.png are in one folder(www) wich I put in zip for PGB.

                      I'm building android app.

                      It seems to work now, but I'm not sure what caused it to work.

                      the splash screen is shown, but it is only the screen from the root directory.

                      folder structure:











                      <widget xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" id="xxxxxx" version="1.0.0">



                        <author href="http://phonegap.com" email="support@phonegap.com">xxx</author>

                        <content src="index.html"/>

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

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

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

                        <preference name="SplashScreen" value="screen"/>

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

                        <preference name="SplashScreenDelay" value="10000" />

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

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

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

                        <icon src="icon.png" width="96" height="96" />

                        <splash src="splash.png"/>

                        <plugin name="cordova-plugin-battery-status" source="npm" spec="~1.1.1"/>

                        <plugin name="cordova-plugin-camera" source="npm" spec="~2.1.1"/>

                        <plugin name="cordova-plugin-media-capture" source="npm" spec="~1.2.0"/>

                        <plugin name="cordova-plugin-console" source="npm" spec="~1.0.2"/>

                        <plugin name="cordova-plugin-contacts" source="npm" spec="~2.0.1"/>

                        <plugin name="cordova-plugin-device" source="npm" spec="~1.1.1"/>

                        <plugin name="cordova-plugin-device-motion" source="npm" spec="~1.2.0"/>

                        <plugin name="cordova-plugin-device-orientation" source="npm" spec="~1.0.2"/>

                        <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.0"/>

                        <plugin name="cordova-plugin-file" source="npm" spec="~4.1.1"/>

                        <plugin name="cordova-plugin-file-transfer" source="npm" spec="~1.5.0"/>

                        <plugin name="cordova-plugin-geolocation" source="npm" spec="~2.1.0"/>

                        <plugin name="cordova-plugin-globalization" source="npm" spec="~1.0.3"/>

                        <plugin name="cordova-plugin-inappbrowser" source="npm" spec="~1.3.0"/>

                        <plugin name="cordova-plugin-media" source="npm" spec="~2.2.0"/>

                        <plugin name="cordova-plugin-network-information" source="npm" spec="~1.2.0"/>

                        <plugin name="cordova-plugin-splashscreen" source="npm" spec="~3.2.1"/>

                        <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.2"/>

                        <plugin name="cordova-plugin-vibration" source="npm" spec="~2.1.0"/>

                        <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1"/>

                        <plugin name="nl.x-services.plugins.toast" spec="2.0.2" source="pgb"/>


                        <platform name="android">

                        <icon src="res/icon/android/ldpi_icon.png" width="36" height="36" density="ldpi"/>

                        <icon src="res/icon/android/mdpi_icon.png" width="48" height="48" density="mdpi"/>

                        <icon src="res/icon/android/hdpi_icon.png" width="72" height="72" density="hdpi"/>

                        <icon src="res/icon/android/xhdpi_icon.png" width="96" height="96" density="xhdpi"/>

                        <icon src="res/icon/android/xxhdpi_icon.png" width="144" height="144" density="xxhdpi"/>

                        <icon src="res/icon/android/xxxhdpi_icon.png" width="192" height="192" density="xxxhdpi"/>

                        <splash src="res/screen/android/drawable-land-ldpi-screen" density="land-ldpi"/>

                        <splash src="res/screen/android/drawable-land-mdpi-screen" density="land-mdpi"/>

                        <splash src="res/screen/android/drawable-land-hdpi-screen" density="land-hdpi"/>

                        <splash src="res/screen/android/drawable-land-xhdpi-screen" density="land-xhdpi"/>

                        <splash src="res/screen/android/drawable-land-xxhdpi-screen" density="land-xxhdpi"/>

                        <splash src="res/screen/android/drawable-land-xxxhdpi-screen" density="land-xxxhdpi"/>

                        <splash src="res/screen/android/drawable-port-ldpi-screen.png" density="port-ldpi"/>

                        <splash src="res/screen/android/drawable-port-mdpi-screen.png" density="port-mdpi"/>

                        <splash src="res/screen/android/drawable-port-hdpi-screen.png" density="port-hdpi"/>

                        <splash src="res/screen/android/drawable-port-xhdpi-screen.png" density="port-xhdpi"/>

                        <splash src="res/screen/android/drawable-port-xxhdpi-screen.png" density="port-xxhdpi"/>

                        <splash src="res/screen/android/drawable-port-xxxhdpi-screen.png" density="port-xxxhdpi"/>

                        <feature name="Toast">

                        <param name="android-package" value="nl.xservices.plugins.Toast" />



                        <platform name="ios">

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

                        <splash src="www/res/screen/ios/Default-568h@2x~iphone.png" platform="ios" width="640" height="1136"/>

                        <splash src="www/res/screen/ios/Default-667h.png" platform="ios" width="750" height="1334"/>

                        <splash src="www/res/screen/ios/Default-736h.png" platform="ios" width="1242" height="2208"/>

                        <splash src="www/res/screen/ios/Default-Landscape-736h.png" platform="ios" width="2208" height="1242"/>

                        <splash src="www/res/screen/ios/Default-Landscape@2x~ipad.png" platform="ios" width="2048" height="1536"/>

                        <splash src="www/res/screen/ios/Default-Landscape~ipad.png" platform="ios" width="1024" height="768"/>

                        <splash src="www/res/screen/ios/Default-Portrait@2x~ipad.png" platform="ios" width="1536" height="2048"/>

                        <splash src="www/res/screen/ios/Default-Portrait~ipad.png" platform="ios" width="768" height="1024"/>

                        <splash src="www/res/screen/ios/Default@2x~iphone.png" platform="ios" width="640" height="960"/>

                        <splash src="www/res/screen/ios/Default~iphone.png" platform="ios" width="320" height="480"/>

                        <feature name="Toast">

                        <param name="ios-package" value="Toast" />



                        <platform name="wp8">

                        <icon src="www/res/icon/wp8/ApplicationIcon.png" platform="wp8" width="99" height="99"/>

                        <icon src="www/res/icon/wp8/Background.png" platform="wp8" width="159" height="159"/>

                        <splash src="www/res/screen/wp8/screen-portrait.jpg" platform="wp8" width="768" height="1280"/>

                        <feature name="Toast">

                        <param name="wp-package" value="Toast"/>



                        <platform name="windows">

                        <icon src="www/res/icon/windows/Square150x150Logo.scale-100.png" platform="windows" width="150" height="150"/>

                        <icon src="www/res/icon/windows/Square30x30Logo.scale-100.png" platform="windows" width="30" height="30"/>

                        <icon src="www/res/icon/windows/StoreLogo.scale-100.png" platform="windows" width="50" height="50"/>

                        <splash src="www/res/screen/windows/SplashScreen.scale-100.png" platform="windows" width="620" height="300"/>

                        <icon src="www/res/icon/windows/StoreLogo.scale-240.png" platform="windows" width="120" height="120"/>

                        <icon src="www/res/icon/windows/Square44x44Logo.scale-100.png" platform="windows" width="44" height="44"/>

                        <icon src="www/res/icon/windows/Square44x44Logo.scale-240.png" platform="windows" width="106" height="106"/>

                        <icon src="www/res/icon/windows/Square70x70Logo.scale-100.png" platform="windows" width="70" height="70"/>

                        <icon src="www/res/icon/windows/Square71x71Logo.scale-100.png" platform="windows" width="71" height="71"/>

                        <icon src="www/res/icon/windows/Square71x71Logo.scale-240.png" platform="windows" width="170" height="170"/>

                        <icon src="www/res/icon/windows/Square150x150Logo.scale-240.png" platform="windows" width="360" height="360"/>

                        <icon src="www/res/icon/windows/Square310x310Logo.scale-100.png" platform="windows" width="310" height="310"/>

                        <icon src="www/res/icon/windows/Wide310x150Logo.scale-100.png" platform="windows" width="310" height="150"/>

                        <icon src="www/res/icon/windows/Wide310x150Logo.scale-240.png" platform="windows" width="744" height="360"/>

                        <splash src="www/res/screen/windows/SplashScreenPhone.scale-240.png" platform="windows" width="1152" height="1920"/>


                        <access origin="*"/>

                        <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 name="ios">

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

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



                      • 10. Re: how to replace the default icon to my own
                        VectorP Level 4

                        Since the paths should be relative to where config.xml is located, you should drop "www/" from the splash paths.

                        • 11. Re: how to replace the default icon to my own
                          Holoduker Level 1

                          in the android platform section I dropped all "www/"

                          • 12. Re: how to replace the default icon to my own
                            VectorP Level 4

                            Ah, I see.

                            You are using the density attribute, which should be the qualifier attribute.

                            See the PGB Docs. Icons and Splash | PhoneGap Docs


                            Allow me to suggest that you should also drop the feature elements, since they are obsolete.

                            • 13. Re: how to replace the default icon to my own
                              Holoduker Level 1

                              ...And it finally works! Thank you, very much!

                              May be it would be better if the whole code-text in Icons and Splash | PhoneGap Docs was visible.

                              While scrolling the examples, I didn't noticed the density-qualifier change:)

                              • 14. Re: how to replace the default icon to my own
                                Chris W. Griffith Adobe Community Professional

                                Just check the link to Configap.com and it was fine. Both the Mac and Windows versions downloaded.

                                • 15. Re: how to replace the default icon to my own
                                  VectorP Level 4

                                  Chris, I suppose [s]he referred to the link in Kerri's "Correct Answer", where she linked to the old location of the PGB Docs. A bit lower in the thread, the new link is posted.

                                  • 16. Re: how to replace the default icon to my own
                                    davids81255913 Level 1

                                    Sorry to jump in on this thread a bit late, but I'm having the same issue. My folder structure is correct (icon.png is in root directory along with config.xml and index.html).


                                    My config.xml entry reads as follows:


                                    <icon src="icon.png" />


                                    What am I missing to get my icon to appear as the icon on the device (android) rather than the stock icon?

                                    • 17. Re: how to replace the default icon to my own
                                      VectorP Level 4

                                      You're probably missing icons of the correct dimensions OR the paths to the icons is wrong.

                                      Could you please post your config.xml?

                                      • 18. Re: how to replace the default icon to my own
                                        davids81255913 Level 1

                                        Thanks very much for your response. Below is my config.xml...


                                        <?xml version='1.0' encoding='utf-8'?>

                                        <widget id="com.app.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">



                                            App Description


                                          <author email="" href="">

                                            App Author


                                          <content src="index.html" />



                                          <!-- XHRS (SEE CSP)-->


                                          <!-- NAVIGATION -->

                                          <allow-navigation href="*" />


                                          <!-- INTENTS --> 

                                          <allow-intent href="*" /> 



                                          <icon src="icon.png" />



                                          <platform name="android">

                                            <preference name="SplashScreen" value="splash" />   

                                            <preference name="SplashScreenDelay" value="10000" />

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

                                            <splash src="splash.png" />   

                                            <icon src="\images\favourite.png" />

                                            <icon src="\images\map.png" />

                                            <icon src="\images\marker.gif" />

                                            <icon src="\images\nav.png" />

                                            <icon src="\images\follow_user.png" />

                                            <icon src="\images\location.png" />

                                            <icon src="\images\change.png" />

                                            <icon src="\images\lock.png" />

                                            <icon src="\images\events.png" />

                                            <icon src="\images\statistics.png" />

                                            <icon src="\images\upload.png" />

                                            <icon src="\images\user.png" />

                                            <icon src="\images\settings.png" />

                                            <icon src="\images\comments.png" />

                                            <icon src="\images\clouds.png" />

                                            <icon src="\images\arrow-left.png" />

                                            <icon src="\images\arrow-right.png" />

                                            <icon src="\images\loginArrow.png" />

                                            <icon src="\images\mail.png" />

                                            <icon src="\images\mail-hover.png" />

                                            <icon src="\images\invites.png" />

                                            <icon src="\images\events-hover.png" />

                                            <icon src="\images\settings-hover.png" />

                                            <icon src="\images\statistics-hover.png" />

                                            <icon src="\images\pinellas.jpg" />


                                          <platform name="ios" />

                                          <platform name="windows" />

                                          <engine name="android" spec="~5.2.1" />

                                          <engine name="android" spec="~4.2.0" />

                                          <engine name="windows" spec="~4.4.1" /> 

                                          <plugin name="cordova-plugin-geolocation" spec="~2.2.0" />

                                          <plugin name="cordova-plugin-whitelist" spec="~1.2.2" />

                                          <plugin name="cordova-plugin-inappbrowser" spec="~1.4.0" />

                                          <plugin name="cordova-plugin-splashscreen" spec="~3.2.2"/>