Skip to content
Bonfire Docs
Docs

howto

Branding: logo and colors

Branding controls the visual identity members see across your community — the logo in the header, the icon in their browser tab, and the accent color used for buttons and highlights.

Steps

  1. Go to Admin → Branding.
  2. Upload your logo. Use a transparent PNG or SVG; it appears in the top-left header and on sign-in screens.
  3. Upload a favicon (square icon). This shows in the browser tab and bookmarks.
  4. Set your accent / primary color. This drives buttons, links, active states, and progress bars. Enter a hex value (for example #6366f1).
  5. Choose light, dark, or both as the available theme(s) if your plan exposes the option.
  6. Click Save. Changes apply immediately for all members.

Keep the logo readable at small sizes — it scales down in the mobile header.

Verify it worked

Reload the community as a member. The header shows your logo, the browser tab shows your favicon, and buttons use your accent color. Sign out to confirm the sign-in screen is branded too.

  • Set up white-label
  • Configure a custom domain
  • Navigation

FAQ

Why does my logo look stretched? Upload a logo with the correct aspect ratio and transparent background; avoid baking in extra padding.

Can I use a different color per space? No. The accent color is community-wide. Spaces are organized through groups and channels, not separate color themes.

Can I write custom CSS for full control? No. Styling is limited to logo, favicon, and accent color — there is no custom CSS.

Where do these settings appear in the installed app? Your logo and accent color carry into the PWA. The home-screen icon and app name are set under Admin → Domain & PWA.