Logo Usage: 

Your logo will appear in different position and cases within the App Suite. 

• Login Screen: First touch point with endusers and the App Suite
• App Suite Apps: Your logo will appear in the toolbar, top left corner, of all apps in the App Suite
• FavIcon: Is a tiny icon included along with a website, which is displayed in places like the browser's address bar, page tabs and bookmarks menu.
• Home Screens Icon: A symbol on mobiles home screens or a shortcut on the desktop and dock.

Logo Variations 

Your logo will appear in the toolbar of all apps in the App Suite and as an icon for small visualizations like FavIcon in browser tabs or as an icon on mobile phone home screens. We recommend that you provide both a logo and a symbol to ensure the best representation of your brand in any given situation. 

1. Logo
2. Symbol

Logo Requirements

• File type: SVGs (recommended) or PNGs with transparent background.
• File size: Height 96px. The width is automatically taken from the file
• Your logo: The logo contains your brand as a sign or/and brand name. The logos must be viewable at a small scale, such as on mobile devices.
• We strongly recommend SVG as it is scalable across a large range of sizes without loss of quality. If a PNG image is submitted, it must be least 96px high. App Suite automatically scales png’s to the required sizes, this can lead to a loss of quality.
• Dark Theme Support: App Suite comes with a dark theme. To support your logo in dark theme, your logo will work on dark and light backgrounds by default or a second logo asset for dark mode needs to be provided. 

Symbol Requirements

• File type: SVGs (recommended) or PNGs with transparent background.
• File size: 512px x 512px
• Your Symbol: For symbols, we recommend using branding that has been designed to be viewed on a small scale. Your logo must fit into a square formatted symbol (aspect ratio 1:1). It is displayed for small visualizations and should retain your brand characteristics, such as favicons or or on the home screen of mobile phones. Note: Symbols don’t need to include the brand name. 
• We strongly recommend SVG as it is scalable across a large range of sizes without loss of quality. If a PNG image is submitted. App Suite automatically scales png’s to the required sizes, this can lead to a loss of quality.

Automatic Theming of SVGs

With App Suite 8 we included a possibility to automatically addapt your logo to the theme color a user set. The logo theme will only work with SVG format. 

Setup your svg logo: 

Any unnecessary elements, attributes and inline styles or unique IDs from your SVG needs to be removed, this ensures that styles can be applied uniformly using CSS. Ensure that the color of each element in your logo is set using the fill attribute.

Accent color: 

Use the CSS variable --accent to define the color value. This will automatically adapt on the chosen accent color.

Example

Toolbar forground color: 

Use the CSS variable --toolbar-icon to define the color value. This will automatically adapt the toolbar foreground color to your logo and endsure the contrast to the background

Example