Launch Icons and Splash Screens

Use the Intel® XDK Projects tab to select launch icons and splash screens you want to include as part of your app package when you build your app. The splash screen and icon images described below are includes as part of your app execution package. When you publish your app to a store, a separate set of images may be needed that for the app store description.

Where to Store Your Splash Screens and Icon Images

All splash screens and launch icons images to be included in your built app package must be located within a package-assets directory in the root of your app's project directory.

NOTE: Older projects (those that pre-date the use of the package-assets directory) required that your launch icons and splash screens be located within your project "source directory" (usually named www). That source location for asset files will continue to be honored for existing projects only, unless you change its asset files. If you add or modify any assets for an existing project, you must place the new or modified assets in the package-assets directory. Thus, we recommend that you move all asset files to the package-assets directory for each project when you modify it. New projects must locate these images and iOS provisioning files in the package-assets directory.

If you are also using your launch icons or splash screen images as part of your app's runtime user interface, do not move them from inside your www source directory to the new package-assets directory. If that is the case, you should make copies and move those copies to your new package-assets directory.

Locating your launch icons and splash screens in the package-assets directory avoids the problem of including launch icons and splash screens that are not needed as part of your application package, reducing the overall size of your final app package.

Tips for Creating Splash Screen and Icon Images

The images you choose should visually express the intent of your app (product). They should be consistent with your organization's brand, such as in the use of colors and fonts.

  • Launch icons will normally appear on the mobile device's desktop, among a group of other applications, so the icon you create should easily identify your app. Launch icons are used to start your app.
  • Splash screens appear briefly after your app is launched and are usually visible for a few seconds before your app begins running. A splash screen might contain the name of your app, its icon, information about your organization, etc.

Cordova CLI 5+ requires that your icons and splash screens be provided as PNG format images (even for those platforms that allow either JPG or PNG). You might want to use a graphics editing tool or enlist the aid of a graphic artist to create and scale your images to match the pixel dimensions for each mobile app platform.

For each platform you plan to support, review the resources below for image guidelines and to verify that your images meet the platform requirements.

Android* Image Resources

Images for Android* apps are described in these topics on the Google* Developer website:

iOS Image Resources

Images for iOS apps are described in these topics on the Apple Developer website:

For iOS 8 and later devices, dynamic launch image formats are available (see Launch Files).

Windows* Image Resources

Images for Microsoft Windows* apps are described in these topics on the Windows Developer website:

How to Add, Replace and Remove Image Resources

To add an image:

  1. Open the Projects tab and select the desired project.
  2. Open Launch Icons and Splash Screens (click the plus sign to show/hide this feature).
  3. Click the desired platform tab: Android, iOS or Windows.
  4. Locate the image to be added. Click the directory icon in the upper-right corner of the selected image slot:
  5. Using the file picker, navigate to the image to be added.
  6. After you select the image, click Open.
  7. Repeat as needed to add other images for this platform or for other platforms.

To replace an image:

  1. Open the Projects tab and select the desired project.
  2. Open Launch Icons and Splash Screens (click the plus sign to show/hide this feature)
  3. Click the desired platform tab: Android, iOS or Windows.
  4. Locate the image to be replaced. Click the directory icon in the upper-right corner of the selected image slot:
  5. Using the file picker, navigate to the image to be replaced.
  6. After you select the image, click Open.
  7. Repeat as needed to replace other images for this platform or for other platforms.

To remove an image:

  1. Open the Projects tab and select the desired project.
  2. Open Launch Icons and Splash Screens (click the plus sign to show/hide this feature)
  3. Click the desired platform tab: Android, iOS or Windows.
  4. Locate the image to be removed. Hover your mouse pointer over the center of the image slot until you see a garbage can image, and click the garbage can to remove the image from the slot:
  5. The image is now removed from that slot.
  6. Repeat as needed to remove other images. To add or replace images, see the instructions above.

NOTE: Removing an image does not delete that image from your disk, it only removes it from the icon or splash screen slot so that it will no longer be used as an icon or splash screen asset when building your app package.

For more complete information about compiler optimizations, see our Optimization Notice.