Quickstart: Adding a splash screen (Windows Store apps using JavaScript and HTML)

Set your splash screen image and background color using Visual Studio.

Prerequisites

None

Set the splash screen image and background color in Visual Studio

If you use a Visual Studio template to create your app, "images\splashscreen.png" is added to your project and automatically set as the splash screen image for your app in the "package.appxmanifest" manifest file.

With your project open in Visual Studio, you can easily confirm or change your splash screen image and background color with these steps:

1. Open the "package.appxmanifest" manifest file.

   The manifest should automatically open in the Microsoft Visual Studio Express 2012 for Windows 8 Manifest Designer.

2. Open the Application UI tab and scroll down to the Splash Screen section.

   If you are still using project defaults, you should see the "images\splashscreen.png" path in the Splash Screen field.

   If you open "package.appxmanifest" in a text editor, you should see SplashScreen element as a child of the VisualElements element. For example, the default splash screen markup in the manifest file looks like this:

   XML

   Copy

   
   <SplashScreen Image="images\splashscreen.png" />
   
   

3. Change the splash screen image by using the Browse... button and confirm that the image was added to your Visual Studio project.

   Important  The splash screen image you choose must be 620 x 300 pixels using a 1x scaling factor.

4. In the Background Color field of the Splash Screen section, set the background color to display with your splash screen image. You can enter either the name of a color or '#' and the hex value of a color.

   Setting a background color for your splash screen is optional. If you do not specify a color, the splash screen background color defaults to the Tile background color (the color in the Background Color field of the Tile section in the Application UI tab). If you open package.appxmanifest in a text editor, the Tile background color is specified via the BackgroundColor attribute of the VisualElements element.

   For more details about which colors you can specify and their names, see the SplashScreen element.

Summary and next steps

Learn about creating a good loading experience in Guidelines and checklist for splash screens.

Related topics

Guidelines and checklist for splash screens

How extend the splash screen

Splash screen sample

Reference

Package manifest schema SplashScreen element

Windows.ApplicationModel.Activation.SplashScreen class

Build date: 11/19/2012