Skip to content


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.

App icon example
Fig. 1: App icon example
App pwa example
Fig. 2: App pwa example
App header example
Fig. 3: App header 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

Realfavicon generator

How to use the realfaviongenerator:

  1. Upload the initial favicon file favicon.svg. You can find this in the gitlab repository dbp-ci.
  2. 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
  3. 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
  4. 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
  5. Generate the icons and delete icons which we don't need
  6. Place them in the assets/favicons/ directory

How to use the

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

Add the favicons to your project

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

{src: 'assets/favicons/*.png', dest: 'dist/' + (await getDistPath(},
{src: 'assets/favicons/*.svg', dest: 'dist/' + (await getDistPath(},
{src: 'assets/favicons/*.ico', dest: 'dist/' + (await getDistPath(},
{src: 'assets/favicons/site.webmanifest', dest: 'dist', rename: + '.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.