Branding

Branding is the small set of images and colors that identify your business, kept apart from your page content because they belong to the business rather than to any one page. Set them once and every page picks them up.

Open Branding from your website's Settings menu.

How the page is laid out

The left column is where you put things in. The right column stays in view as you scroll and shows where they turn up: a browser tab in light and dark, an iPhone home screen, a search result, and the card a chat app or a social network shows when someone shares your link. What you see there is what your website has — until you change something, when the preview shows the new version with an Unsaved preview bar. Nothing changes on your website until you press Save to website.

Your logo and your logo mark

Two images do most of the work:

• Logo — the wide logo in your website's header.
• Logo mark — the square symbol on its own, without the wordmark. Your favicon and your app icon are cut from this.

Each one takes an SVG or a PNG, JPG or WebP, three ways: paste the SVG code straight into the box, drop a file on it, or press Upload. You can also pick an image your website already has with From media, or press Generate with AI. If you have a logo but no mark, Use my logo cuts one from it.

An SVG is measured and trimmed to its artwork, then saved as a sharp transparent PNG large enough for every size it will be shown at. Whitespace around a PNG mark is trimmed too, so a mark exported with a wide margin still fills its icon.

The icons

As soon as you upload a logo mark (or press Use my logo), your favicon and your Apple home-screen icon are cut from it and saved, and the preview shows them in a browser tab, on an iPhone and in a search result. A mark set with Generate with AI or From media is saved straight away too, but the icons cut from it wait in an Unsaved preview: press Save to website to use them, or Discard to keep the icons you had.

Under Advanced → Icon style you can change what sits behind the mark — Transparent, your Brand color, White, or a Custom color — and how much room it has. The favicon keeps its transparency unless you give it a background; the Apple icon is always filled, because iOS fills a transparent icon for you, in black. Change either setting and the preview updates; press Save to website when you like it.

If you would rather use an icon you made yourself, the ⋯ menu on the Icons card lets you upload a favicon or an Apple icon, import a favicon from a website address, choose one from your media library, or generate one with AI — and remove either. With a logo but no mark, the same menu offers Cut from my logo for each icon.

The iPhone preview shows your Apple icon in the dock among neighbouring apps; a dashed square there means the website has no Apple icon yet.

Your colors

Two colors do the work:

• Primary — buttons, links, and key highlights. The default is #0069FF.
• Secondary — deep accents, headings, and dark surfaces. The default is #111827.

Type a hex value, use the color picker, or press Help me choose. That reads the colors out of your logo and offers a few primary/secondary pairings drawn from it. You need a logo before there is anything to read.

The assistant designs with these colors. Changing them here is the reliable way to recolor a whole website — far more reliable than asking for "a bit more blue" page by page.

Social sharing image

The picture that appears when someone shares a link to your website, 1200 × 630. You never start from nothing: until you save one, the page draws a proposal from your brand — your mark (or your logo, until you have a mark), your website name, and your tagline when your website has one, on your primary colour. Pick a layout (Mark, Mark + name, or Tagline) and a background (Brand, White, Dark, or a colour of your choice), and press Save to website when you like it. The preview on the right is exactly what is saved.

You can also upload your own image, choose one from media, or generate one with AI; once an image is saved, Create from my brand brings the proposal back if you want to replace it.

Advanced

• Mobile logo — a compact logo for narrow screens. Leave it empty and your logo is used; Use logo mark fills it from your mark in one click.
• Dark-background logo — a light or inverted logo for dark sections and footers. Light version of my logo makes one from your logo in one click.
• Icon style — the background and padding of the icons cut from your mark, above.

Every slot can be replaced or removed at any time. Removing an image leaves the slot empty; your pages fall back to plain text where a logo would have been.

When you start from an existing website, its favicon is brought across for you and fills the Favicon slot, unless you had already chosen one.

AI generation is a real AI run and draws from your website's AI credits, like any other build. You are not charged when a generation fails. If an AI update is already running for this website, wait for it to finish or stop it from the Website builder before generating another asset.

Where your branding images live

Every image you choose here is also saved into your website's own media library, in an images/branding folder, named after the slot it fills:

The extension follows the file you chose — a WebP logo is saved as .webp; an SVG is saved as .png.

Their addresses are recorded in your website's data file as logo, logo_mark, logo_mobile, logo_inverted, favicon, apple_icon, and social_image, so a page can reference them by name rather than by path:

<a href="/"><img src="{{ $site->logo }}" alt="{{ $site->name }}" class="h-8 w-auto"></a>

That works the other way round too. If the assistant sets one of those keys — or you set it yourself in developer mode — that image appears in the slot on this page. The Branding page and your website's files are two views of the same thing.

Deleting one of those images in the media library empties its slot here, which is why the media manager warns you before it does.

When branding takes effect

Branding is applied as pages are served, not baked into a build. Save a new logo and it appears on your dev site and your live site immediately — there is nothing to republish and nothing to ask the assistant for.

The copy saved into your website's files follows the ordinary rules for a file: it lands in your draft, so it reaches your dev site straight away and your live domain when you next publish. A page written as {{ $site->logo }} therefore updates on the live site at publish time, while the slot itself is already live.

Your dashboard icon

Your website also has a small icon on your dashboard, so a list of several websites is readable at a glance. Set it on Company details — it can be generated from your logo mark (or your logo) in one click, exactly like the favicon.

Next

• Company details — the name, contact details, and address that go with this branding.
• Editing your pages — changing what a specific page shows.