1. Overview
  2. White Label App
  3. Add your own brand - Icon and Brand Colors

Add your own brand - Icon and Brand Colors

Step 1 - Add your App icon

Add your icon which will be used in the browser, in the installed web-app and within the app.

It is important that several parameters are done, well for the icon to work.

It must be 512 px x 512 px square format in height and width
If the logo is not filling the full area, the non-logo areas must be transparent
It must be in a .png format

Tip: Ensure that it has some padding towards the edges and that it ideally works well on light and dark backgrounds.

Here some tips for good icon design:

  • Use a unique shape or symbol
    Create an icon that’s instantly recognizable on a user’s screen.

  • Keep it simple
    Avoid cramming lots of colors or images into your app icon. Even if you decide to use a variety of colors and graphics, the best icons focus on one element or concept rather than trying to jam every feature into a tiny icon. You want to go for instant recognition — if someone needs to squint to make out the details of your icon, you’re not accomplishing your goal.

  • Don’t include words
    Long words are hard to read in such a small space when it’s sitting alongside a bunch of other icons. Instead, opt to use just the first letter of your company or brand instead, like these apps.
  • Choose vibrant colors
    Make sure your app icon looks good on a variety of different backgrounds. Using vibrant colors will help your app stand out both against the other apps a user has installed and against his or her background image.

Step 2 - Add your brand logo

Often brand logos are available, but they are something different then app icons.

App Icon example Brand logo example
Example image_programBrand

The brand logo is used in different locations, as for example at the bottom of the login screen or in the header of the notification emails.

Step 3 - Add your brand colors

Button Color Color that is used in buttons and links. Should be a slight dominant color, so that users can find actions quickly.
Info Text Color Is used for informative sections and is rather in the background.
Background Text Body and Background Window body Your tone for the white and lightgrey
Navigation Color Used in the navigation and as background of the chatbot. Should be darker
Darkmode (colors cannot be changed) Our Darkmode option can be activated as default for new users

 

Add more changes in the colors as well as in the images

Step 4 - Optional Design Images

Upload App Teaser Image Is used in the login screen as well as on the Chrome Web-app install function
Upload Background Image  Is used for informative sections and is rather in the background.

! The above features require a Creator-Account !

 

 

Related Articles


Was this article helpful?
© 2025 Help: AI Coaching Platform - Rocky.ai