Language: HTML | XAML

Quickstart: Adding a splash screen (HTML)

Applies to Windows and Windows Phone

Set your app's splash screen image and background color using Microsoft Visual Studio 2013.

See this feature in action as part of our App features, start to finish series:  Windows Store app UI, start to finish.


This quickstart uses Visual Studio 2013. To download, see Get the tools.

Set the splash screen image and background color in Visual Studio 2013

When you use a Visual Studio 2013 template to create your app, a default image is added to your project and set as the splash screen image. The background color for your splash screen defaults to a light gray. If you want to change the default image or color of your app's splash screen, follow these steps:

  1. Open your existing Windows Runtime app project in Visual Studio 2013.
  2. From Solution Explorer, open the "Package.appxmanifest" file. You can also open this file from the menu bar by choosing Project, Store, and Edit App Manifest.
  3. Open the Visual Assets tab and select Splash Screen from the All Image Assets pane on the left side of the "Package.appxmanifest" window. If you're changing your splash screen for the first time, you'll see the "Assets\SplashScreen.png" path in the Splash Screen field.

    The following screen shot shows the "Package.appxmanifest" window in Visual Studio 2013.

    A screen shot of the "Package.appxmanifest" window in Visual Studio 2013

    If you open "Package.appxmanifest" in a text editor, the SplashScreen element appears as a child of the VisualElements element. The default splash screen markup in the manifest file looks like this in a text editor:

    <m2:SplashScreen Image="images\splashscreen.png" />
  4. To select a new splash screen image, press the button with an ellipsis that appears next to 620 x 300 px label below Scaled Assets. Choose the 620 x 300 pixel image (.png, .jpg, or .jpeg) you'd like to use for your splash screen image.

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

  5. In the Background Color field of the Splash Screen section, set the background color displayed with your splash screen image. You can enter either the name of a color or '#' and the hex value of a color. For a list of the names of available colors, see SplashScreen element.

    Setting a background color for your splash screen is optional. If you don't specify a color, the splash screen background color defaults to a light gray (hex value #464646). This is the same color as the default Tile background color (see the Background Color field of the Tile Images and Logos section in the Visual Assets tab).

Summary and next steps

If your app takes a while to load, consider adding an extended splash screen. For step-by-step guidance, see How to extend the splash screen. Learn about creating a good loading experience in Guidelines and checklist for splash screens.

Want to know more about the other images required for a Windows Store app? See Choosing your app images.

Related topics

Guidelines and checklist for splash screens
How extend the splash screen
Splash screen sample
Package manifest schema SplashScreen element
Windows.ApplicationModel.Activation.SplashScreen class



© 2014 Microsoft