Overview
UnifyApps Applications supports two distinct branding assets at the app level: the logo and the favicon. The logo is the visual mark displayed prominently inside the running application; the favicon is the small icon that identifies your app in browser chrome and operating system UI. Both are configured in Builder Settings and are applied to the published app automatically — no code changes are required.
These settings are per-app. If you are running a white-label deployment where different tenants need different logos, use a logo URL binding with App Overrides to supply tenant-specific logo URLs at runtime rather than uploading separate logos.
Logo Configuration
The app logo is the primary brand mark 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, WebP | SVG is strongly recommended for logos — it is resolution-independent and scales cleanly on all screen densities. |
| Recommended dimensions | 200 × 48 px | This is the maximum display area in the default nav header. Logos wider than 200 px are scaled down to fit; logos taller than 48 px may be cropped. |
| Maximum file size | 1 MB | Larger files are rejected at upload. Compress PNGs before uploading; SVGs are typically well under this limit. |
| 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.
Loading splash screen — shown while the app initialises on first load. The splash background color is configured separately in Builder Settings → General → Splash Screen.
Login page — if your app uses a built-in UnifyApps login page (configured in Privacy Settings), the logo appears above the login form.
Dark and Light Logo Variants
When your app supports both light and dark color schemes (configured in the Theme Builder), you can upload separate logo variants for each mode. This is important if your logo contains text or elements that are dark-colored and would become invisible against a dark nav header background.
| Variant | When Used | Design Guidance |
| Default (Light-mode) logo | Displayed when the app is in light mode | Dark or full-color version of the logo, designed for display on a light or white header background. |
| Dark-mode logo | Displayed when the app is in dark mode | Light or white version of the logo, designed for display on a dark header background. Typically the logo with inverted or white text and icon elements. |
If only one logo is uploaded, it is used in both light and dark mode. The platform does not automatically invert or adapt a single logo for opposite color schemes — upload a dedicated dark-mode variant if needed.
Dynamic Logo Binding
The nav header's logo source can be bound to a dynamic expression rather than a static uploaded file. This enables per-tenant white-labelling: each tenant's logo URL is stored as an override value and injected at runtime.
To use a dynamic logo:
In the nav header component's properties, find the Logo source field.
Click the binding toggle to switch from static file to expression mode.
Enter the binding:
{{app.branding.logoUrl}}(if using the branding namespace) or{{app.overrides.tenantLogoUrl}}(if using an App Override key).
The static uploaded logo still serves as the fallback when the binding resolves to an empty or invalid URL.
Note: Logo URLs must be publicly accessible. If you use a dynamic logo URL, the image must be reachable from the user's browser without authentication. Images hosted behind an auth wall will not load. Use a public CDN or public storage bucket URL for dynamically bound logos.
Favicon Configuration
The favicon is the small icon that browsers display in tabs, bookmarks, browser history, and the address bar. For Progressive Web Apps (PWAs), it also serves as the app icon when users add the app to their device home screen. Configure it in Builder Settings → General → Brand Assets → Favicon.
Upload Specifications
| Property | Requirement | Notes |
| Accepted formats | ICO, PNG | PNG is simpler to work with. ICO is the traditional format and supports multiple embedded sizes in one file. |
| Recommended size (PNG) | 64 × 64 px | The browser scales down to 16×16 and 32×32 as needed. Starting at 64 px gives clean results at all sizes. |
| Minimum size | 32 × 32 px | Images smaller than 32×32 are accepted but may appear blurry in some browsers. |
| Maximum file size | 256 KB | Favicons are fetched by the browser on every page load — keep them small. A well-optimised 64 × 64 PNG should be under 10 KB. |
| 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.
PWA home-screen shortcut — when a user adds the app to their device home screen via the browser's "Add to Home Screen" function, the favicon is used as the shortcut icon. For a better home-screen appearance, see Mobile App Icons which provides higher-resolution dedicated PWA icons.
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.
PWA Icons
If your Web App is configured to support Progressive Web App (PWA) installation, the platform also uses the favicon as the app icon on the device home screen. For a polished PWA experience, it is better to upload dedicated PWA icons at larger sizes:
| Icon Size | Used For | Format |
| 192 × 192 px | Android Chrome home-screen icon | PNG, transparent background accepted |
| 512 × 512 px | Android Play Store listing and high-DPI home screens | PNG |
| 180 × 180 px | iOS Safari "Add to Home Screen" icon (Apple Touch Icon) | PNG, no transparency (iOS applies a rounded-corner mask) |
PWA icons are uploaded in Builder Settings → General → Brand Assets → PWA Icons. If PWA icons are not uploaded, the platform falls back to the favicon at all sizes.
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 200×48 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. If your logo disappears or loses contrast in dark mode, upload a dedicated dark-mode variant.
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 at 512 × 512 px, exported at 64 × 64 px for the favicon upload, is almost always more recognisable in the browser tab than a shrunken wordmark.
Asset Hosting for Dynamic Logos
When using dynamic logo bindings for white-label deployments, host logo files on a CDN rather than inline data URIs. CDN-hosted images benefit from browser caching, load faster on subsequent visits, and can be updated without republishing the app. Ensure the CDN allows cross-origin requests (CORS) from your app's domain.
Related Pages
Mobile App Icons — iOS and Android app icons, adaptive 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 — tenant-scoped logo URL overrides for white-label deployments.
App Configuration — full reference for all Builder Settings sections including General → Brand Assets.