PhoneGap – Icons and Splash Screens Help

September 12, 2013By 48 Comments

cordova_256If you’re using the PhoneGap 3.0 CLI to build your applications there may be some confusion around where and how to set your icons and splash screens. It may appear that you can just specify them in your project’s root www folder since the default config.xml generated by the tool has them specified in there, such as shown here:

    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png" />
    <gap:splash gap:density="ldpi" gap:platform="android" src="res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:density="mdpi" gap:platform="android" src="res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:density="hdpi" gap:platform="android" src="res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:density="xhdpi" gap:platform="android" src="res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="res/screen/windows-phone/screen-portrait.jpg" />

HOWEVER, this is only the case when you are using PhoneGap Build to build your application, not when you are building locally. If you are building yourself locally you must actually put them in the appropriate platforms manually. Specific information on this is provided below.

iOS

On iOS, you can manually specify the application icons and splash screens (aka: Launch Images) for your project in XCode via the Summary tab. You will see that the default PhoneGap icons are currently displayed, and to change them just right click on the little boxes provided for you to select your images – such as:

Screen Shot 2013-09-12 at 4.49.19 PM

You need to ensure you select icons and splash screens that are the correct size or XCode will pop up an error. The easiest way to check what you need is by just looking at the size of the defaults already there. When you hit Select File you will actually be taken to the icons folder within the ios platform that contains the default PhoenGap icons. You could also click Show in Finder to get there quickly and check out the required sizes. The same is the case for the splash screens, which are called Launch Images in XCode right underneath the App Icons (see above).
To specify the icons and splash screens in the file system without using XCode, copy the icons into the …/platforms/ios/Geometrixx/Resources/icons folder and splash screens into the …/platforms/ios/Geometrixx/Resources/splash folder.

Android

For android you will need different required sizes than iOS in some cases, which you can easily see again by looking at the defaults currently in place under the …/platforms/android/res folder within each of the drawable* folders as shown in the screenshot below (icon.png files need to be replaced with yours). The sizes of the splash screens for Android and how to implement them are also explained here in the PhoneGap docs. The splash screens need to be placed in the …/platforms/res/drawable folder

android-icons

See the PhoneGap docs here for related info as well…

Filed in: AndroidCordovaiOSMobile DevelopmentPhoneGap Tags:

About the Author ()

Comments (48)

Trackback URL | Comments RSS Feed

  1. Tolu says:

    Hello Holly,

    Thank you for this post, didn’t have an easy time figuring it out myself weeks ago! Just a little hint for android builds, in addition to following the steps in your post, the onCreate() method of the class that extends DroidGap must also be edited as follow:

    public void onCreate(Bundle savedInstanceState)
    {
    super.onCreate(savedInstanceState);
    super.setIntegerProperty(“splashscreen”, R.drawable.splash);
    super.loadUrl(Config.getStartUrl(), 5000);
    }

    This java class is usually found in platforms/android/src/com/your-package-id/your-package-name/your-package.java
    Anyone trying this should be fine as long as their splash images are each named as splash.png

    • Thanks for the tip Tolu!

    • Dominic says:

      For Android, save the Splashscreen Image as splash.png so that there wont rise any problems by using R.drawable.splash

    • Andrew Clinton says:

      Tolu, this helped solved my issues with Cordova CLI 3.3.1. I changed all of my splash file names to splash.png and then I added super.setIntegerProperty(“splashscreen”, R.drawable.splash); to my project.java and it worked like a charm!!

      Thanks again!

    • Agha Usman says:

      I spend half hour searching for the solution. Great man !!! I should have read your comment before. Thanks

    • Greg says:

      Thanks for this Holly and Tolu! This worked perfect for me although I left the super.init() in and had no issues. I think that means it only displays while loading, instead of for 5 seconds as it looks like you specified with the 5000.

  2. If you are using PhoneGap Build, you can also download my free tool, ConfiGAP (http://configap.com/) to assist in authoring the config.xml file.

  3. Dan Moore says:

    Hi,

    If you don’t want to manually put the icons into your platform directory each time, you can write a hook script to do this for you.

    I’ve written a bit about this here: http://www.mooreds.com/wordpress/archives/1197 but with the information Holly provides and the nodejs docs, you should be able to write your own fairly easily.

    Dan

  4. Hey Holly,

    Do you know if there is an ETA on when/if this will be address in the Cordova CLI so we don’t have to do the extra work here? Managing everything via config.xml and a folder above the /platforms folder would obviously be the ideal. Thanks for this info for now though!

  5. Tien Do says:

    Hi Holly,

    I read several times that config.xml is only for PhoneGap Build and not local build. But I got error when executing command “phonegap build ios” without config.xml file in the root www folder. Do you know why (copy config.xml back solved this issue)?

    I use Xcode to set various icons and screen as you said above. But all default images are still exist in folder icons and splash under /platforms/ios/AppName/Resources, why aren’t they replaced by my images?

    Although my app icon appeared on home screen, I still see default spashscreen when launching app (I did change it to mine). I’m a bit confused between splashscreen and launch image (iOS documents say about launch image). Are they same?

    Thanks,

  6. I’ve started using this Build Run Script in my XCODE projects for Cordova/IOS builds to delete all the other device icon and splash files from each build. Is there a better/cleaner way to do this?

    https://gist.github.com/cemerson/6670382

  7. Great information Holly!

    For people looking for Windows Phone 8 information:

    In project properties -> WMappManifest.xml update tiles information and appIcon.

    Add these files at the root of the project:
    SplashScreenImage.screen-WVGA.jpg
    SplashScreenImage.screen-720p.jpg
    SplashScreenImage.screen-WXGA.jpg

    I am still struggling with BlackBerry 10 so if anybody knows, it would be great information!

  8. Dan Moore says:

    Hi Holly,

    I’ve been working on a book about using Cordova CLI: https://leanpub.com/developingwithcordovacli/

    It’s about 85% done, but there is a ton of information that is useful to Cordova developers in the book right now.

    I’d love to offer a complimentary copy to you as a thanks for what I’ve learned from your blog (would love feedback, but any feedback you can give is just icing on the cake).

    Please go to https://leanpub.com/developingwithcordovacli/ and use the coupon code tLg8Zd1NbRqu to get your complimentary copy (this coupon is good for one use).

    Thanks,
    Dan

    • Thanks Dan! Sorry for the delayed response, I get a ton of comments on my blog that take me awhile to get through sometimes :) I will check it out and get back to you with any feedback. I will also point people to it for more information, maybe even blog it specifically. Will let you know, thanks again! Holly

  9. PeterD says:

    Hi,

    thank you very mich for this blog post.
    Can you share some information how this works on blackberry10?

    Thanks,
    Peter

  10. Sephy says:

    Hi there,

    Great post. Nice summary of how to do if you build locally, but i’ve been rummaging around for a while on the web and the build from phonegap build, seems to generate weird behavour…
    In my case, my Sencha Touch 2 app, is very simple, i pack it through PGB and when i launch the app on my phone, it starts with a black screen with the title bar containing the name of my app, then a black screen for a few seconds, then my splashscreen flashes for a second or so, and finally my app launches… It’s quite a long time to launch a small html5 app… Any idea about that ?

  11. Arun Rajappa says:

    Thanks – this saved me a lot of time! I was struggling to find out how to get this working for different image sizes, and your post was the perfect answer!

  12. Cesidio DiBenedetto says:

    All this can be fixed by using the hooks provided in the cli. Under the “.cordova” directory of your project, you can write “hook” scripts that will/can copy/replace the icons and whatever other files you would need in their proper places. Since cordova-cli uses node, I wrote some node scripts to hook into the after_prepare command to replace the icons and splashscreens

  13. Salman Anjum says:

    What about 480×854 screen resolution?
    How do I set splashscreeen for that resolution?

  14. Guillaume says:

    Hi Holly,

    Thank you for your post, it helped me for the app I’m building for iOS and Android without XCode.

    However, I would like to add some feedback:
    For iOS, I didn’t have to put the icons in “/platforms/ios/Geometrixx/Resources/icons”, but instead in “res/screen/ios/” folder, as your config.xml file shows. I had to do the same thing for the splash sreen.

  15. Varuna Singh says:

    Thanks, that cleared my head!

  16. rahmadid says:

    Hi,
    It seems that the phonegap blackberry 10 version has bug when searching for app icon file. It doesn’t use the icon in “res\icon\blackberry” folder, instead it used the one in “res\icon\ios” folder, file “icon-57-2x.png” to be exact.

  17. Jose Manuel says:

    Hello!! I’m using build.phonegap.com to build an iOS app. When app starts, Cordova logo is shown for a few seconds (http://devgirl.org/wp-content/uploads/2012/10/cordova_256.png). After the cordova logo, splash screen is shown. The cordova logo doesn’t exist on my project. Maybe it is inserted by the Adobe Phonegap Builder, isn’t it?
    Many thanks and kind regards,

    Jose Manuel.

  18. Thanks Molly for all the tutorials on devgirl.
    Concerning the splash screens; is there a way to specify the orientation? or is fixed to portrait when using cordova CLI?

  19. Creating all of the splash pages and icons in different sizes became too time consuming for us. Every time we wanted to change our splash or icons we had to re-create them in all of the target sizes.

    We created a simple tool that allowed us to automate the process and even integrate it into our build process.

    Check it out at:
    http://www.5starstechnology.com/products/cordova-splash-and-icon-maker

  20. Agha Usman says:

    Holly Schinsky, you are awesome. I spent almost 3 hours working on this icon issue and I am expecting config.xml lines to be worked. Double thumbs up for you. Thanks

  21. neil manuell says:

    adding the line:

    super.setIntegerProperty(“splashscreen”, R.drawable.splash);

    to my Main.java file actually broke my compilation.
    instead I added:

    to my config.xml

    if that helps anyone.

  22. neil manuell says:

    my xml has been swallowed up
    these preference tags:

    preference name=”SplashScreen” value=”splash”
    preference name=”SplashScreenDelay” value=”10000″

    • Guilherme says:

      This line:
      super.setIntegerProperty(“splashscreen”, R.drawable.splash);

      also broke my compilation. But only because I had
      preference name=”SplashScreen” value=”splash”

      in my config.xml… when I changed it to
      preference name=”splashscreen” value=”splash” (downcase)

      it worked.

  23. Ryan Knell says:

    Lol, I swear I came to your site about icons two or so versions ago and was placing items in folders. Sure enough this stopped working in 3.4!

    Thanks for keeping one or two steps ahead of me and solving the issues before I know I have them!

  24. ashish says:

    very nice and useful info about icons and splash screen . I also tried to write on loading screen in phonegap for android . Can you please tell how to show native loading screen in ios too without using plugin

  25. Nikhil says:

    Hi Holly,

    What would be the splash screen sizes for iPhone 6 and iPhone 6 Plus devices.

    I was taken by surprise while uploading today to iTunes, when I had to even update the images. Look forward to your support on this.

    Thanks,
    Nikhil Juneja

Leave a Reply