Branding
About Branding
It is possible to customise certain elements of the Authenticator App with your own branding. You can do this by supplying us with the necessary resources for each mobile platform.
What can you customise?
You can customise elements such as:
- The name of the app.
- The application icon.
- The logo on the welcome page and home page.
- The colour value for various elements within the app, such as the toolbar, button colour and background colour.
- The launch image or splash screen, which is displayed during the launch of the app.
- The notification icon.
- The help page.
Please see sections below for details on each element.
App name
The name of the app, which is used in messages to the end-user.
Welcome to Signicat Authenticator
App icon
The icon of the app.
Example of an iOS app icon
App icon sizes for iOS
- 1024 px x 1024 px
App icon for Android
For Android we support adaptive icons. Adaptive icons can display differently depending on the individual device capabilities and user theming. You can read more about adaptive icons in the Android developer documentation.
The adaptive icon must meet the following design requirements:
- An adaptive icon must be supplied as two layers, which are preferably vector images:
- The foreground layer, which is the icon itself.
- The background layer.
Example of an Android adaptive icon
This diagram shows an adaptive icon defined using foreground and background layers.
The 72 dp x 72 dp safe zone shows where your icon and foreground layers will never be clipped by a shaped mask defined by an OEM.
- All layers should be sized at 108 dp x 108 dp.
- The foreground layer should be at least 48 dp x 48 dp, and should not exceed the 72 dp x 72 dp safe area.
- The background layer should be sized at 108 dp x 108 dp, and can be either:
- An image.
- A colour, given in a hexadecimal colour code format. For example, #451621.
- Optionally, a monochrome icon can be provided for supported Android launchers. This allows the app icon to inherit the colour of the end-user's chosen wallpaper and other themes.
You can learn how to create and export an adaptive icon for Android using an example template in Figma's documentation.
Company logo
The logo that is used on the welcome page, the home page, and optionally the launch screen for iOS.
To get the best result, we advise that you supply a high-quality version of your company logo with a transparent background. The allowed file format of the supplied logo varies depending on the target platform. See sections below for details.
Example of a company logo
iOS allowed file formats
You can supply a high-quality version of your company logo in any of the following formats:
- PDF (.pdf)
- PNG (.png)
We recommend that you use the PDF file format, as this scales better than PNG files.
Android recommended file formats
You can supply a high-quality version of your company logo as either:
- SVG (.svg)
- High-resolution image file
Colour
You can specify the colour for certain elements within the app. The colour value needs to be in a hexadecimal colour code format.
Button colour #451621.
Customisable elements
Launch screen or splash screen
The screen that is displayed when the app is being launched.
- For iOS it is called the launch screen.
- For Android it is called the splash screen.
To get the best result, we advise that you supply a high-quality version of your icon or image with a transparent background. The allowed file format of the supplied asset varies depending on the target platform. See sections below for details.
Launch screen for iOS
For the launch screen on iOS, we use an image on a background. You can supply your own image, and you can also specify the background colour.
Example of an iOS splash screen
Customisable elements
iOS allowed file formats
You can supply a high-quality version of your launch image in any of the following formats:
- PDF (.pdf)
- PNG (.png)
We recommend that you use the PDF file format, as this scales better than PNG files.
Splash screen for Android
For the splash screen on Android, you can choose whether this is customised or not.
- For customised splash screens, you can:
- Add a custom logo
- Specify the background colour
- Optionally add a branding logo if required. The branding logo is displayed on the bottom of the screen and has a rectangular aspect ratio.
- If no custom icon for the splash screen is provided, then the application icon will be used by default.
To learn more about splash screens, see the Android developer documentation.
Example of an Android splash screen
Customisable elements
Branding logo considerations
You should consider the following when choosing a branding logo:
- It should be no wider than 200 dp, and no taller than 80 dp.
- We advise that you supply it as either an SVG (.svg) or a high-resolution image file.
- It should be in a rectangular aspect ratio. Branding logos formatted as squares or circles are likely to be cut off.
Notification icon
The small icon that is displayed in a notification when a push message to start the app arrives. This notification is visible when the app is not already running in the foreground.
For iOS, a smaller version of the app icon is used for the notification icon.
Notification icon sizes for Android
You have to supply the notification icon with a transparent background.
- 24 px x 24 px (mdpi)
- 36 px x 36 px (hdpi)
- 48 px x 48 px (xhdpi)
- 72 px x 72 px (xxhdpi)
- 96 px x 96 px (xxxhdpi)
Help page
Our Authenticator App has support for an optional help page, which can contain useful contact information for your end-users.
You can navigate to the help page from either the welcome screen or the menu within the app.
This page is only visible if you supply any of the supported help details shown in the table below.
Help details
Face authentication
The button colour and company logo that you specify for the Authenticator App is also applied to all screens associated with face authentication.
Example of a Signicat branded Authenticator App while performing a face scan
It is possible to further customise the appearance of the face authentication screens if required. To do this:
- See which elements can be customised in the Customizable Elements section of the FaceTec documentation.
- Share your requirements with us. You can do this in the support ticket used for sharing your assets with us.
Package name (Android only)
This step is only required for the Android version of the Authenticator App.
You must create a package name with your app and share it with us, as this will define a unique ID for the app which is required when we create it and when you upload it to the Play Store.
It is also required for configuring certain features, such as push notifications.
Format rules
When creating a package name for your app:
- You must use the following format:
com.encapsecurity.android.standardapp.<YOUR_PACKAGE_NAME> - The package name (
<YOUR_PACKAGE_NAME>) must:- Be shorter than 10 characters.
- Consist only of lowercase letters.
iOS certificates (iOS only)
This step is only required for the iOS version of the Authenticator App.
Before we can publish your iOS app, you need provide us with the required iOS signing assets and your app's Bundle ID:
| Name | Description |
|---|---|
| Distribution Provisioning Profile | This is a (.mobileprovision) file that must be created for the App ID that you provide.It must include the required capabilities, for example Push Notifications, Access Wi-Fi Information if your app requires it. |
| iOS Distribution certificate | This must be exported as a .p12, with private key included. |
| Team ID | This is your Apple Developer Team ID. |
| Bundle ID | This is your app's Bundle Identifier. For example, com.example.myapp. |
If you change the Bundle ID, App ID capabilities, provisioning profile or certificate after delivery, then you need to provide new assets and restart the publishing process.
We recommend that you double-check the values before sending them.
To learn how to do this, follow the instructions on the Publish to Apple App Store page.
Branding checklist
You can find a checklist of all branding details that you need to share with us in the table below, in addition to an example of each.
Share the assets with us
To share the assets with us, you can create a support ticket in the Signicat Dashboard: