App icons

An app icon is usually the first thing the users see when they encounter your app and can have a lasting impression on them. It lets you communicate your app's unique purpose and personality and helps people recognize it faster. As an app creator, you can upload an app icon of your liking.

Note

The following guidelines aren't mandatory but should be used for your app icon to ensure the best visibility in every situation.

To upload your icon correctly, you'll need the following files, including an app background and a grid with its components:

• App icon background (PNG file)
• App icon grid (PNG file)

Technical requirements

Follow these requirements to display your icon in the best quality:

• Format: PNG
• Color profile: sRGB
• Size: min. 256x256px
• Recommended icon file size: ~30kb
• Bundle size limit: 100kb (a bundle consists of code and all used assets)

Background

Use the icon background to ensure the best visibility across all use cases. A background effectively contrasts icons with text and provides a simple and clean canvas for displaying your content. Especially when switching from dark to light mode, the background comes in handy. Our team has developed a suitable background for your convenience, which you can download with the files mentioned above.

Caution

Don't use a white app icon since it would not be visible on this background.

Grid

The grid provides key shapes for creating a cohesive and visually pleasing design. These key shapes ensure that each element is properly aligned, sized, and spaced, creating a balanced and harmonious overall design. Whether you design the icon from scratch or already have one, you can use the grid to get the perfect positioning. We provide a grid in the size of 256x256px. This is the maximum size of an app icon that guarantees good resolution for all uses.

Create a file in your preferred design tool and place the grid directly over the background. The background already includes the required padding (invisible frame), so you only need to consider positioning your icon in the next step.

Caution

Remember to remove the grid before you upload your finished app icon.

Key shapes

These four key shapes placed within the grid will help you find the right size and position for your icon. Place your icon in the most fitting key shape and try to bring it as close as possible to its outline.

Circular	Square	Rectangle horizontal	Rectangle vertical

Step-by-step guide

1. Download the PNG files to place your app icon and the background in the grid.
   • App icon background (PNG file)
   • App icon grid (PNG file)
2. Position the icon on the app background, consider the padding, and avoid a white-colored icon.
3. Use the provided key shapes to ensure proper alignment, size, and spacing.
4. Remove the grid before exporting the app icon.
5. Create the app icon in PNG format, with a minimum size of 256x256px and color profile sRGB.
6. The finished app icon should include the invisible frame (padding) around the app background.
7. Ensure the icon file size is ~30kb.

Tip

If done correctly the file size should already be in the suggested range of ~30kb. If not, you can use online tools or Photoshop to compress the file size of your app icon and save space.

Set the icon of your app

To set the app icon, add the icon file in your project and configure it using the icon property in your app configuration file:

app.config.json

{
  "environmentUrl": "<Your-Environment-URL>",
  "app": {
    "id": "<Your-App-ID>",
    "name": "<Your-App-Name>",
    "version": "0.0.0",
    "description": "<Your-App-Description>",
    "scopes": []
  },
  "icon": "<Your-Icon-Path>"
}

app.config.ts

import type { CliOptions } from 'dt-app';

const config: CliOptions = {
  environmentUrl: '<Your-Environment-URL>',
  app: {
    id: '<Your-App-ID>',
    name: '<Your-App-Name>',
    version: '0.0.0',
    description: '<Your-App-Description>',
    scopes: []
  },
  icon: '<Your-Icon-Path>'
}

module.exports = config;

You can find all the possible options to configure your app in this reference.