Skip to content

Branding Your App

Most of the basic app styles can be managed from the Admin site under "Theme", including your:

  • Product Name
  • Primary Color
  • App Logo
  • Navbar Logo

Once your app is running, we recommend you update the app's theme on the Admin site. There are also two important exceptions to managing your app design, the App Icon and Splash Screen, which are created when building the app. In this article, we will cover how to update these images.

Updating the App Icon and Splash Screen

App Icon: This image is shown as your application icon on the device home screen.

Note

If you have notification system feature, app icon will also be the icon shown in a push notification.

Splash Screen: This image is shown when opening your app.

Steps

  1. Go to folder hamv_mobile/resources/ and change the "icon.png" with your own app icon design.

  2. Also in the folder hamv_mobile/resources/, change the "splash.png" with your own splash screen design.

  3. Next, run the command ionic cordova resources.

    ionic cordova resources

    Note

    To run command ionic cordova resources, the Ionic CLI requires an Ionic account. You may need to provide your email and password, or sign up for an account if you haven't already. This will generate new images based on the "icon.png" and “splash.png” files. You should see your new images under the resources/android and resources/ios folders.

  4. Now the next time you build your app for android or iOS, your new App Icon and Splash Screen will be included.

Note

  • Splash Screen
    • Required image size:4098 × 3312 pixels.
    • ionic cordova resources may not work if the image size is different.
  • The artwork will be cropped and resized automatically to support multiple screen resolutions.
  • App Icon
    • Required image size: 1024 x 1024 pixels
    • ionic cordova resources may not work if the image size is different.
    • The artwork will be cropped and resized automatically to support multiple screen resolutions.
    • The artwork should have no rounded corners as each platform will modify and add their preferred effects; for example, the iOS platform will add rounded corners to the app icon.
    • To use a different icons for Android and iOS, the image should follow this path, Android: resources/android/icon.png, iOS: image for iOS should use this path: resources/ios/icon.png

Have more questions? Submit a request

Last update: July 11, 2023