Customizing the icon and launch screen of mobile apps

Match the branding of your mobile app with the requirements of your company or project by customizing the app icon and launch screen. Branded applications ensure that your users recognize your brand's identity.
Before you begin: Create a mobile channel for your mobile app. For more information, see Setting up mobile apps.
  1. Open your mobile channel:
    1. In the navigation pane of App Studio, click Channels.
    2. In the Current channel interfaces section, click the tile that represents a mobile channel for your app.
  2. On the mobile channel page, on the Layout tab, click Branding.
  3. In the App icon section, customize the icon that appears on the home screen of the mobile device:
    1. Hover over the app icon preview, and then click Change.
    2. In the App icon dialog box, choose how you want to customize the icon:
    Choices Actions
    Create a text-based icon
    1. Click the Text tab.
    2. In the Text field, enter up to two characters to show in the app icon.
    3. In the Text color section, click the color picker icon, and then select a color for the text.
    4. In the Background color section, click the color picker icon, and then select a color for the background of the icon.
    5. Click Generate.
    Use an existing image
    1. Click the Icon tab.
    2. In the Select icon field, click the image of your choice.
    3. In the Icon color section, click the color picker icon, and then select a color for the image.
    4. In the Background color section, click the color picker icon, and then select a color for the background of your icon.
    5. Click Generate.
    Upload a custom image
    1. Click the Image tab.
    2. In the App icon section, click Choose File, and then browse to and select an .svg file of your image.
      The recommended image dimensions are 512 x 512 pixels.
    3. In the Background color section, click the color picker icon, and then select a color for the background of your icon.
    4. Click Generate.
  4. In the Launch screen section, customize the launch screen that appears when the mobile app starts:
    1. Hover over the launch screen preview, and then click Change.
    2. In the Launch screen dialog box, choose how you want to customize the launch screen:
    Choices Actions
    Create a text-based launch screen
    1. Click the Text tab.
    2. In the Text field, enter up to two characters to show on your launch screen.
    3. In the Text color section, click the color picker icon, and then select a color for the text.
    4. In the Background color section, click the color picker icon, and then select a color for the background of your launch screen.
    5. Click Generate.
    Use an existing image
    1. Click the Icon tab.
    2. In the Select icon field, click the image of your choice.
    3. In the Icon color section, click the color picker icon, and then select a color for your image.
    4. In the Background color section, click the color picker icon, and then select a color for the background of your launch screen.
    5. Click Generate.
    Upload a custom image
    1. Click the Image tab.
    2. In the App icon section, click Choose File, and then browse to and select an .svg file of your image.
      The recommended image dimensions are 512 x 512 pixels.
    3. In the Background color section, click the color picker icon, and then select a color for the background of your launch screen.
    4. Click Generate.
  5. Click Save.
Example: 

Figure: Design of a custom icon mobile app and launch screen

Configuring a custom launch screen and icon for a mobile app with the help of the live preview.
What to do next: Verify the changes to your mobile app by generating, installing, and launching the app. For more information, see Generating native mobile apps.