Customize app icons and splash screens

Updating your app's icons varies slightly between the different platforms. One theme that is consistent among the mobile platforms is providing different-resolution icons to account for the different resolutions of screens available. There are a number of tools available online to assist in creating icons of different file formats, and at different resolutions.

Add a custom app icon and launch image for iOS

The ArcGIS Runtime Qt Quick Application template comes with everything you need to update your app's name, icon, and capabilities.

  1. Update the launch images and application icons by replacing the resources in the /iOS/Images.xcassets folder produced by the template.
  2. Replace each of the following application icons in the AppIcon.appiconset folder with an appropriately sized image of the same name:
    • Icon_29.png (29x29)
    • Icon_40.png (40x40)
    • Icon_50.png (50x50)
    • Icon_57.png (57x57)
    • Icon_58.png (58x58)
    • Icon_72.png (72x72)
    • Icon_76.png (76x76)
    • Icon_80.png (80x80)
    • Icon_100.png (100x100)
    • Icon_114.png (114x114)
    • Icon_120.png (120x120)
    • Icon_144.png (144x144)
    • Icon_152.png (152x152)
  3. Replace each of the following launch images in the LaunchImage.launchimage folder with an appropriately sized image of the same name:
    • Launchimage-320x480.png
    • Launchimage-640x960.png
    • Launchimage-640x1136.png
    • Launchimage-768x1024.png
    • Launchimage-1024x768.png
    • Launchimage-1536x2048.png
    • Launchimage-2048x1536.png

Add a custom app icon and splash screen for Android

The QML App template comes with everything you need to update the app's name, icon, and capabilities.

  1. In QtCreator, open the AndroidManifest.xml file in the Android folder in your project. This will bring up the manifest in an easy-to-use view.
  2. To set the application icons, click each icon in the Application sections to replace them with your own.
    • large (hdpi) 72x72
    • medium (mdpi) 48x48
    • small (ldpi) 36x36

    To set the higher-resolution icons, you will need to manually copy the following icons into the /Android/res folder.

    • xx-large (xxhdpi) 180x180
    • x-large (xhdpi) 96x96

  3. To set the splash screen in the AndroidManifest.xml file, switch to the XML Source view and uncomment the following line:

    <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/splash"/>

  4. Using File Explorer, browse to the /Android/res folder in your project folder. Inside each of the following folders, add an appropriately sized file named splash.png:
    • drawable-xhdpi (640x960)
    • drawable-hdpi (480x800)
    • drawable-mdpi (320x480)
    • drawable-ldpi (240x320)

Add a custom app icon for Windows

Windows uses an .ico file as the app icon. These files contain several different resolutions of the image, to handle different display scenarios. To customize the icon, swap out the AppIcon.png file located in the Win folder of your project with your custom icon file using the same file name. After rebuilding and starting your app, the new icon will be used in the task bar.

Add a custom app icon for Mac

Mac uses an .icns file as the app icon. These files contain several different resolutions of the image to handle different display scenarios. To customize the icon, swap out the AppIcon.icns file located in the Mac folder of your project with your custom icon using the same file name. Ensure that any existing app bundle resources have been deleted from the shadow build folder. After rebuilding and starting your app, the new icon will be used in the dock.