Overview
UnifyApps Applications supports three branding images at the app level: the Logo, the Symbol and the Fav Icon. The Logo and Symbol are the visual marks displayed inside the running application; the Fav Icon is the small icon that identifies your app in the browser tab. All three are configured in Builder Settings and need no code changes. Visitors see a new image once you publish the app.
These settings are per-app, and each slot holds one file. If different tenants need different branding for the same app, that comes from an app override, which is set up by whoever provisions your apps — there is no screen for it in the builder.
Uploading Brand Assets
In the app builder, open Settings → General → Brand Assets.
Click an empty slot (Logo, Symbol or Fav Icon) and choose a file, or drop the file onto it.
To replace an image, click the trash icon on the uploaded file to remove it, then upload the new file in the empty slot.
The builder saves your change automatically. Publish the app so visitors see the new images.
Logo Configuration
The app logo is the primary brand mark, with your wordmark, shown in the application's navigation header. Configure it in Builder Settings → General → Brand Assets → Logo.
Upload Specifications
Property | Requirement | Notes |
|---|---|---|
Accepted formats | SVG, PNG, JPG, WebP | SVG is strongly recommended for logos — it is resolution-independent and scales cleanly on all screen densities. |
Recommended dimensions | 252 × 32 px | This is the size the Logo slot asks for. |
Background | Transparent recommended | A transparent background ensures the logo integrates cleanly with any nav header color. Opaque backgrounds create a visible bounding box. |
Aspect ratio | Wide (landscape) preferred | Horizontal wordmarks render best in the nav header's horizontal space. Square or portrait logos are supported but leave more horizontal space unused. |
Where the Logo Appears
The uploaded logo is automatically used in the following locations within the app:
Top navigation header — the primary position. Displayed on every page in the nav bar, typically in the top-left corner.
Expanded navigation menu — shown at the top of the menu when it is expanded. When the menu is collapsed, the Symbol is shown instead.
The logo is not drawn on a login page automatically. To show it there, add an Image block to your login page and bind its source to {{ interfaceRecord.metadata.logo.large }}, so it follows the app's logo.
Symbol
The Symbol is the icon-only version of your logo, used in compact places such as a collapsed navigation menu. Upload it in Builder Settings → General → Brand Assets → Symbol. It accepts SVG, PNG, JPG and WebP, and the panel asks for 32 × 32 px. The Symbol does not fall back to the Logo, so upload both.
One Logo for Both Color Schemes
Each slot takes one file, and the same Logo is used in both light and dark color schemes. The platform does not invert or adapt the logo, so choose artwork that reads on both a light and a dark navigation header background.
Showing the Logo Inside a Page
You can read the app's stored logo from any binding. For example, an Image block whose source is {{ interfaceRecord.metadata.logo.large }} renders the full Logo, and {{ interfaceRecord.metadata.logo.small }} renders the Symbol. Bracket notation, such as {{ interfaceRecord['metadata']['logo']['large'] }}, reads the same value. Bind one of these values, never the whole logo object — an image bound to the object renders empty.
Favicon Configuration
The favicon is the small icon that browsers display in tabs, bookmarks, browser history, and the address bar. Configure it in Builder Settings → General → Brand Assets → Fav Icon.
Upload Specifications
Property | Requirement | Notes |
|---|---|---|
Accepted formats | PNG, SVG, ICO | PNG is simpler to work with. ICO is the traditional format and supports multiple embedded sizes in one file. |
Recommended size | 32 × 32 px (or SVG) | The Fav Icon slot asks for 16 × 16 px, but this is a hint, not enforced. A 32 × 32 px PNG or an SVG stays sharp on high-density displays, where tabs show the icon at 32 × 32. |
Shape | Square (1:1 aspect ratio) | Non-square favicons are stretched or padded to fill the square space. Design your favicon as a square icon from the start. |
Background | Opaque or transparent | Transparent backgrounds let the browser use the tab background color behind the icon. On dark-mode browsers this can make light elements invisible — consider a brand-colored background for better contrast. |
Where the Favicon Appears
Browser tab — the most visible position. Displayed at 16×16 or 32×32 pixels depending on the browser and display density.
Bookmarks bar and bookmarks menu — shown at 16×16 pixels next to the bookmark title.
Browser history — displayed in the browser's history list alongside the page title.
OS taskbar or dock — when the app is open in a browser window that is pinned to the taskbar or dock, the favicon is the window icon.
Favicon Design Tips
Because the favicon is displayed at a very small size, standard logo design rules do not apply:
No text. Wordmarks and any text in the logo become illegible at 16 px. Use a standalone icon or monogram instead.
High contrast. The icon needs to be recognisable against both light and dark browser tab backgrounds. Bold, high-contrast shapes work better than subtle gradients or thin lines.
Simple shape. A single recognisable symbol — the first letter of the brand, a geometric icon, a simplified mark — reads better than a complex illustration reduced to 16 pixels.
Brand color background. Adding a brand-colored background (rather than transparent) makes the icon pop in the tab bar and ensures it looks consistent across all browsers and OS themes.
Best Practices
Use SVG for Logos
SVG files are vector-based and render crisp at any size and on any screen density — from a standard 1× desktop display to a 3× iPhone Retina screen. A PNG logo designed at 252×32 px can appear blurry on high-DPI displays. An SVG will not. If your design team provides logo files in multiple formats, always use the SVG for the UnifyApps logo upload.
Test on Both Color Schemes
Before publishing, preview your app in both light and dark modes to verify the logo is legible in both contexts. The easiest way is to toggle your OS or browser to dark mode and open the app Preview. The same Logo is used in both modes, so if it disappears or loses contrast in dark mode, adjust the artwork until it reads on both backgrounds.
Keep the Favicon Simple
Invest in a purpose-built favicon rather than using a scaled-down version of the full logo. A monogram or simplified icon designed at 512 × 512 px and exported at 32 × 32 px (or as an SVG) for the Fav Icon upload is almost always more recognisable in the browser tab than a shrunken wordmark.
Related Pages
Mobile App Icons — iOS and Android app icons and splash screens for Mobile App types.
Theme Builder — configuring the color tokens that appear in the navigation header behind your logo.
App Overrides — per-app branding set up by whoever provisions your apps.
App Configuration — full reference for all Builder Settings sections including General → Brand Assets.