Icon customization

The customization of the app icons depends on the type of icon. You can customize the Mobile Authenticator Studio app's launcher icon, the notification icon, and the splash screen icon.

With the exception of the PNG launcher icon for Android on versions prior to Android 8, all icon customizations are optional. However, to ensure compatibility with different devices and Android versions, we recommend customizing the launcher and splash screen icons and use adaptive icons in SVG format.

Launcher icon

iOS

To customize the launcher and / or navigation icons on iOS, provide a PNG file in square mode, 1024x1024 px, to OneSpan. For more information about app icons on iOS, refer to the iOS developer documentation.

Android

Android supports two types of app icons: legacy PNG and adaptive SVG icons.

An adaptive icon consists of two layers, foreground and background, each defined in a separate SVG file. This type of icon can display a variety of shapes across different device models. While adaptive icons are the new standard on Android 8.0 and later, a PNG icon is still needed to support versions prior to Android 8.0. For more information about Android adaptive icons, refer to the Android developer documentation on adaptive icons.

A legacy PNG icon does not have a foreground, and background resources can have any shape. Any PNG files you provide must be the maximum resolution possible. However, we do not recommend this and advise using SVG files.

Legacy PNG icons are required for all versions prior to Android 8.

For the customization of the Mobile Authenticator Studio launcher icon, the legacy PNG icon must always be provided. If no adaptive SVG icons are provided, the legacy PNG icons will be used instead for all Android versions. If adaptive SVG icons are provided, those icons will be used by default, where the system version allows it, and the legacy PNG icon will be used as fallback for versions prior to Android 8.0 which do not support the adaptive format.

Special considerations for adaptive SVG icons

• The foreground and background layers are stacked on top of each other. The foreground layer might include transparency, and the background one must be fully opaque.

• Usually a logo is placed in the foreground layer but this is not a requirement. Placing elements in different layers gives an opportunity to create some advanced visual effects.

• Use clean edges. The layers should not have masks or background shadows around the outline.

• The generated launcher icon can be of a poor quality (scale up or down depending on the device resolution, which can lead to a blurry icon). The background of the icon will be white.

Customization examples

On devices running Android 8.0 and later, a launcher icon will be created from the ic_launcher_background.svg and ic_launcher_foreground.svg files, on devices running Android 7.1 and lower, ic_launcher.png will be used as a launcher icon.

1. Customization using adaptive SVG icons

   "assets": {
      "android": {
         "launcherIcon": "android/icons/ic_launcher.png",
         "launcherAdaptiveIconBackground": "android/icons/ic_launcher_background.svg",
         "launcherAdaptiveIconForeground": "android/icons/ic_launcher_foreground.svg",
      }
   }

2. Customization using legacy PNG icons

   "assets": {
      "android": {
         "launcherIcon": "android/icons/ic_launcher.png",
      }
   }

Notification icon

On Android, you can also customize the icon to use for push notifications from the Mobile Authenticator Studio app. Add the customized icon as PNG or SVG file to the customization of your integration. If you do not provide a file for customization, Mobile Authenticator Studio displays the launcher icon.

Customization of the splash screen icon

The implementation and customization of a splash screen icon is optional but recommended.

iOS

On iOS, the splash screen must be an svg file. For more information about icons on iOS, refer to the iOS developer documentation.

Android

On Android, if you do not provide an svg file for the splash screen, the launcher icon you specified is automatically used to also render the splash screen. This may have different visual effects depending on what was used for the launcher icon:

• If an adaptive SVG icon is used, the splash screen will be displayed correctly.

• If a legacy PNG icon is provided, the splash screen might appear slightly blurred, depending on the quality of the PNG used.

Specifications:

• Customization key: splashScreen

• Dimensions: 288x288 dp. The icon must fit within a circle 192 dp in diameter. Everything outside the circle will become invisible (masked).

Animations are not supported in Mobile Authenticator Studio. For more information, refer to the Android developer documentation on splash screens.

Customization examples

1. Using a dedicated splash screen SVG file

   "assets": {
      "splashScreenBackgroundColor": "#FFFFFF",
      "android": {
         "splashScreen": "android/icons/ic_splash_logo.svg",
      }
   }

2. Using a launcher icon as a splash screen. If the splashScreen key is not specified, the app will automatically use the provided launcher icon (SVG or PNG) to render the splash screen.

   1. Adaptive icons (SVG) are provided: the splash screen will display the icon which was created from the ic_launcher_foreground.svg layer.

      "assets": {
         "splashScreenBackgroundColor": "#FFFFFF",
         "android": {
            "launcherAdaptiveIconBackground": "android/icons/ic_launcher_background.svg",
            "launcherAdaptiveIconForeground": "android/icons/ic_launcher_foreground.svg",
         }
      }

   2. Standard app icon (PNG) is provided: the splash screen will display the PNG launcher icon (can be blurry).

      "assets": {
         "splashScreenBackgroundColor": "#FFFFFF",
         "android": {
            (...)
         }
      }