Apps

The branding for a specific app consists of three parts: the name, the friendly name and an app icon.

App name

The app name is a creative almost unique title. It should be recognizable and simple. E.g.: mono, esign, formalize, greenlight, check-in... It also should not exceed a maxlength of 15 characters and should have a minimum of 4 characters.

App friendly name

Because the app name can be creative and brandend we need an explanation of it. The friendly name of an app is a description of the app name. E.g.: mono - digital payment service, esign - electronic signature service, formalize - electronic forms. greenlight - a ticket system, check-in - a contact tracing system... It also should not exceed a maxlength of 30 characters and should have a minimum of 10 characters.

App icon

The app icon appears at two places in the dbp-branded versions of the apps: in the app shell header and as a PWA icon.

Fig. 1: App icon example

App shell header

The icon in the app shell header[fig3] is the plain icon with no squares and in true black and 50% opacity. [fig1] For more information about the appearance and how to create an app icon, see app icon under icons.

PWA Icon

The icon in the color white and on the squares is used as the pwa icon[fig2]. For further information and placement take a look at app icon.

Favicons of apps

There exists many favicons in different sizes and formats for different devices and uses.

We need following files:

Filename	Size	Use Case	With app icon
favicon.ico		Default, IE
favicon.svg		For all modern browsers
favicon-16x16.png	16x16 px	Classic favicon displayed in the tabs
favicon-32x32.png	32x32 px	For safari on Mac OS
android-chrome-192x192.png	192x192 px	For Android Chrome M39+ with 4.0 screen density	✓
android-chrome-512x512.png	512x512 px	For Android Chrome M47+ Splash screen with 4.0 screen density	✓
apple-touch-icon.png	152x152 px	For Apple iPhones	✓
safari-pinned-tab.svg		For safari tabs	✓
maskable-icon-512x512.png	512x512 px	For newer android devices	✓
maskable-icon-640x640.png	640x640 px	For newer android devices	✓

Other files:

site.webmanifest for android phones (Replace {{your-app-name}} with the name of your app)

{
    "name": "{{your-app-name}}",
    "short_name": "{{your-app-name}}",
    "icons": [
        {
            "src": "local/{{your-app-name}}/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "local/{{your-app-name}}/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "any"
        },
        {
            "src": "local/{{your-app-name}}/maskable-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png",
            "purpose": "maskable"
        },
        {
            "src": "local/{{your-app-name}}/maskable-icon.png",
            "sizes": "640x640",
            "type": "image/png",
            "purpose": "maskable"
        }

    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "start_url": "./",
    "display": "standalone"
}

We use the favicon generator with MIT license realfaviongenerator to generate the favicons and app icons. After that we have to create the maskable icons. For that we use the maskable.app.

Realfavicon generator

How to use the realfaviongenerator:

Upload the initial favicon file favicon.svg. You can find this in the gitlab repository dbp-ci.
Favicon for iOS Section:
1. Add a dedicated picture, the app icon.
2. Select the option "Add a solid, plain background to fill the transparent regions."
3. Background-color: #ffffff
4. Margin-size: 4px
Favicon for Android Chrome Section:
1. Add a dedicated picture, the app icon.
2. Select the option "No change, keep the master picture as it is."
3. App name: "dbp shortname-of-the-app"
4. Theme color: #ffffff
macOS Safari Section:
1. Add the favicon file safari-pinned-tab.svg. You can find this in the gitlab repository dbp-ci.
2. Theme color: #3775c1
Generate the icons and delete icons which we don't need
Place them in the assets/favicons/ directory

Maskable.app

How to use the maskable.app:

Click "Editor"
Upload the app icon(png) in the "layers section" on the right
Add 20% padding to the icon
Select a white background on the left
Click export
1. Select Max size (640x640) and 512x512
Download them and name them correctly (maskable-icon-512x512.png and *maskable-icon-640x640.png)
Place them in the assets/favicons/ directory

Add the favicons to your project

Add all previous generated and needed files in the assets/favicons/ directory.
Add in rollup in the copy section:

{src: 'assets/favicons/*.png', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/favicons/*.svg', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/favicons/*.ico', dest: 'dist/' + (await getDistPath(pkg.name))},
{src: 'assets/favicons/site.webmanifest', dest: 'dist', rename: pkg.name + '.webmanifest'},

3. Add in html.ejs

    <!-- Favicons -->
    <link rel="shortcut icon" type="image/x-icon" href="<%= getPrivateUrl('favicon.ico') %>">
    <link rel="icon" type="image/svg+xml" href="<%= getPrivateUrl('favicon.svg') %>">
    <link rel="apple-touch-icon" sizes="180x180" href="<%= getPrivateUrl('apple-touch-icon.png') %>">
    <link rel="icon" type="image/png" sizes="32x32" href="<%= getPrivateUrl('favicon-32x32.png') %>">
    <link rel="icon" type="image/png" sizes="16x16" href="<%= getPrivateUrl('favicon-16x16.png') %>">
    <link rel="manifest" href="<%= getUrl(name + '.webmanifest') %>">
    <link rel="mask-icon" href="<%= getPrivateUrl('safari-pinned-tab.svg') %>" color="#3775c1">
    <meta name="theme-color" content="#ffffff">
    <meta name="apple-mobile-web-app-status-bar-style" content="white">

Applying own colors

For not dbp uses, you might want to use the app icon and favicons from dbp, but with your brand colors. This and other changes can be read in the Theming documentation.