Where to put the app icons and splash screen files?

Question

As PhoneGap build says to upload only www.zip folder, then I am not able to understand where I have to put the icons and splash screen folder for each platform. Should I put that inside www?

The reason to ask this question is that if we are supposed to keep the icons and splashes inside www only, then my app will become very heavy and unnecessary icons and splash screen files will be added into my app as my app is cross platform, and I have include icons and splashes for all the platforms.

If we work offline (PhoneGap CLI), then we used to keep the files inside res outside the www folder, and Cordova build process automatically copies only platform specific icons and splash screen files, but here it will add all the files even that is required for selected platform.

score 6 · Accepted Answer · answered Jul 27 '16 at 01:46

As you have already figured out, PhoneGap Build has slightly different project structure. Yes, you only zip and upload the www folder and nothing else. By the way, the name of the zip file does not have to be www.zip, it can be anything else, but it must only contain the www folder, or better only the contents of the www folder without the folder itself.

You need to have icon.png and splash.png in the www root folder which serve as the default icon and splash screen. Then you add a subfolder for the additional images. You can name it res or any name you want with any number of folders inside, but add an empty file with the name ".pgbomit" in its root, which will tell PhoneGap Build to only include the required files from this folder like you mentioned. Then you reference each file with the full path in the config.xml which must be in the www root folder too.

So the structure should be something like:

www
   res
      icon
          android
          ios
      splash
          android
          ios
   config.xml
   icon.png
   splash.png
   index.html

And your config.xml section related to the icons and splash screens should be like this (in version 5 and above):

  <icon src="icon.png" />
  <splash src="splash.png" />
  <platform name="ios">
    <icon src="res/icon/ios/icon.png" width="57" height="57" />
    <icon src="res/icon/ios/icon@2x.png" width="114" height="114" />
    <icon src="res/icon/ios/icon-72.png" width="72" height="72" />
    <icon src="res/icon/ios/icon-72@2x.png" width="144" height="144" />
    <icon src="res/icon/ios/icon-60.png" width="60" height="60" />
    <icon src="res/icon/ios/icon-60@2x.png" width="120" height="120" />
    <icon src="res/icon/ios/icon-60@3x.png" width="180" height="180" />
    <icon src="res/icon/ios/icon-76.png" width="76" height="76" />
    <icon src="res/icon/ios/icon-76@2x.png" width="152" height="152" />
    <splash src="res/splash/ios/Default~iphone.png" width="320" height="480"/>
    <splash src="res/splash/ios/Default@2x~iphone.png" width="640" height="960"/>
    <splash src="res/splash/ios/Default-Portrait~ipad.png" width="768" height="1024"/>
    <splash src="res/splash/ios/Default-Portrait@2x~ipad.png" width="1536" height="2048"/>
    <splash src="res/splash/ios/Default-Landscape~ipad.png" width="1024" height="768"/>
    <splash src="res/splash/ios/Default-Landscape@2x~ipad.png" width="2048" height="1536"/>
    <splash src="res/splash/ios/Default-568h@2x~iphone.png" width="640" height="1136"/>
    <splash src="res/splash/ios/Default-667h.png" width="750" height="1334"/>
    <splash src="res/splash/ios/Default-736h.png" width="1242" height="2208"/>
    <splash src="res/splash/ios/Default-Landscape-736h.png" width="2208" height="1242"/>
  </platform>

The above config is for iOS, so add similar sections for other platforms you wish to support, but like iOS section above, make sure you follow the correct image sizes and names from the other platforms.

Where to put the app icons and splash screen files?

1 Answers1