Branding
The Settings → Branding tab is where you set the logo, favicon, primary and accent colours, typography, and footer text. Everything you change here shows up in the sidebar header, the browser tab, the login screen, transactional emails, and the public visitor form.
Open the branding tab
From the sidebar, click Settings. The first tab — Branding — is selected by default. The form is split into four sections: Typography, Logo & Images, Colors, and Footer.
Typography
Platform title
The text that appears next to the logo in the sidebar header and the browser tab. Most churches use their brand name — "Grace Church", "Hope City", "Eschatos". Keep it short; long titles wrap awkwardly on the mobile sidebar.
Subtitle
A second line under the title in the sidebar — useful for "Colombia", "Headquarters", or whatever differentiates this org from siblings. Leave it empty if you don't want a second line.
Logo and images
Logo
Click Upload to pick a file from your computer, or Media Library to reuse an image already in storage. Either way, the image goes through a square crop dialog before it's saved — drag the crop frame to centre your logo and click Apply.
TIP
Use a transparent PNG or SVG. PNG is more compatible (every browser, every email client); SVG is sharper on retina displays but some older email clients render it as a broken-image icon. If in doubt, upload a PNG.
Recommended size: at least 256×256. The sidebar renders the logo at 14×14 (Tailwind units, ~56px); the email header uses 80×80. Anything smaller than 128px gets fuzzy on retina screens.
Favicon
Same upload flow, but cropped to 32×32 or 64×64. The favicon is what shows in browser tabs and bookmarks. It's also what iOS uses as the home-screen icon if the PWA manifest isn't configured — see PWA setup for the better answer.
Accepted formats: PNG, ICO, SVG. The crop dialog caps the output at 192px so the file stays small.
Colors
Primary color
The colour used for buttons, links, the active sidebar item, and active tabs. Pick something that contrasts well with white text — the button labels are white at ~14px font weight, so very pale primary colours will fail accessibility checks.
Accent color
A secondary colour for badges, sidebar hover states, and non-primary action buttons. Often a lighter shade of the primary — e.g. primary #3563a8 with accent #6b94d6. The live preview at the bottom of the Colors section shows both side by side so you can sanity-check the pair.
You can type a hex code directly or use the colour-picker swatch. Both fields stay in sync.
Live preview
A small card at the bottom of the Colors section renders a primary button, an accent button, and two filled circles using whatever's in the inputs. It updates as you type — no save required to preview.
Footer
The footer appears at the bottom of every page in the admin app and in some transactional emails. There are four fields:
| Field | Example | Notes |
|---|---|---|
| Copyright line | "© Y All rights reserved." | Y is replaced with the current year automatically. |
| Built-by prefix | "Built by" | The lead-in text before your company name. |
| Company name | "Genio Del Comercio Digital SAS" | Shown as a hyperlink. |
| Company URL | https://geniodelcomerciodigital.com/ | Where the company name links to. Open in a new tab. |
Most churches leave the built-by line as the GCM default to give the platform credit. If you white-label, replace it with your own consultancy or omit it by clearing all four fields.
Save and see the change
Click Save branding at the bottom of the Branding card. The toast confirms; the sidebar updates immediately for you, but other tabs and other users see the change only after a hard reload (the toast tells you so). The browser caches the favicon aggressively, so it may take a few minutes for the new icon to appear in everyone's tab.
What's saved where
All branding values land in app_settings under the brand_* and footer_* keys:
brand_title,brand_subtitlebrand_logo,brand_favicon(storage paths)brand_primary_color,brand_accent_colorfooter_line1,footer_line2_prefix,footer_link_text,footer_link_url
The frontend reads these via BrandingContext on app startup, which means a fresh tab opens with your branding already applied — no flash of unstyled content.
Public site branding
The website builder has its own logo and colour palette, separate from the admin app branding. See Website Builder branding for setting those — they're intentionally split so your member-facing site can look different from your staff-facing admin.
Common pitfalls
"I uploaded a new logo and the old one is still showing." Hard-reload the page (Cmd+Shift+R / Ctrl+Shift+R). The browser caches the logo image; the URL changes when you upload a new one but cached pages keep the old one until refresh.
"My primary colour is hard to read on light backgrounds." The admin app uses your primary as a button background with white text. If the contrast ratio is below 4.5:1, screen-reader users and anyone in bright sunlight will struggle. Run your colour through a contrast checker before saving.
"The favicon never updates." Browsers cache favicons aggressively — sometimes for days. Try a private window to verify the new favicon is actually live before assuming the save failed.
Next steps
- Organization basics — set the locale before branding so the right language renders.
- PWA setup — the installable app has its own colour scheme.
- Website Builder branding — public site colours.