Branding
Control how your community app looks on members' home screens — from the icon they tap to the splash screen they see on launch.
All branding settings are under Settings → Mobile App → Settings (the Settings sheet/tab).
App Icon
The app icon appears on the member's home screen and in the browser install prompt.
Upload a Custom Icon
- Go to Settings → Mobile App → Settings.
- Under Custom Icon, click Upload icon (or Change if an icon already exists).
- Select a PNG, JPG, or SVG file. A crop dialog opens.
- Crop the image to a square, then confirm.
- The icon preview updates immediately at two sizes: 128 px (home screen) and 48 px (label preview, Home screen).
- Click Try It or Publish to save — the icon uploads to the CDN at that point.
To revert to the community logo, click Reset to logo.
Icon Background
Choose a background that appears behind your icon image.
| Preset | Type | Colors |
|---|---|---|
| White | Solid | #ffffff |
| Black | Solid | #000000 |
| Gray | Solid | #1f2937 |
| Blue | Gradient | #3b82f6 → #1d4ed8 (135°) |
| Purple | Gradient | #8b5cf6 → #6d28d9 (135°) |
| Teal | Gradient | #14b8a6 → #0d9488 (135°) |
| Orange | Gradient | #f97316 → #ea580c (135°) |
| Rose | Gradient | #f43f5e → #e11d48 (135°) |
Click any swatch to apply it instantly. You can also configure a custom background type:
| Background Type | Options |
|---|---|
| Solid | Single color picker |
| Gradient | From color, to color, angle (0–360°) |
| Transparent | No background; icon renders on white |
Icon Priority (Manifest)
When generating the PWA manifest, icons are resolved in this order:
- Custom PWA icon uploaded via Upload icon
- Tenant logo from community settings
- System fallback (
/android-icon-192x192.png)
The manifest includes a 192 px icon (all browsers) and a 512 px maskable icon (Samsung/Google devices).
Splash Screen
The splash screen is shown briefly when the installed app launches.
Fields
| Field | Type | Default | Notes |
|---|---|---|---|
| Enabled | Toggle | ON | Turn off to skip splash entirely |
| Background Color | Color picker + hex | #ffffff | Sets splash background |
| Loading Indicator | Toggle | ON | Shows animated 3-dot loader below logo |
| Icon Animation | Select (5 options) | Pulse | Logo animation style on launch |
Animation Styles
| Value | Description |
|---|---|
| Pulse | Subtle opacity breathing |
| Bounce | Vertical up-down movement |
| Fade In | Opacity fade over 1.5 s |
| Scale Up | Grows from 70% to 100% |
| None | Static; no animation |
A live portrait preview (180×320 px) updates in real time as you change settings.
Install Banner
The install banner is the prompt that appears on your community site encouraging members to add the app to their home screen.
Fields
| Field | Type | Default | Max length | Notes |
|---|---|---|---|---|
| Title | Text input | Install {Community Name} | 50 chars | Headline shown in the banner |
| Description | Text input | "Add to your home screen for quick access" | 100 chars | Subheader shown below the title |
| Show on Public Page | Toggle | ON | — | Display banner to non-members on the public landing page |
A live banner preview renders below the fields, showing the title, description, close (X) button, and your app icon with its current background.
If Show on Public Page is ON, the install banner is visible to visitors who are not yet members. This is useful for growing your community's installed user base.
Next Steps
- Navigation Tabs — Configure which tabs appear in the bottom navigation
- Preview and Publish — Test branding in the PWA Simulator before publishing