> Lettrove docs Next · https://docs.lettrove.com/docs/get-started/logo

# Logo branding

Your users see **your logo and your product name** at the left of the editor's bar, where ours
would be. The editor then reads as part of your product, with nothing of Lettrove's in view
("Powered by Lettrove" is off unless you turn it on).

You set them **once, in your project's settings**, with no code. They apply to every editor the
project opens, in every framework, with test keys and live keys alike. Every project can set them.

Your colours, font and corners are the other half of your brand; they go in your code, on
[Branding](./branding.md).

## Set your logo and product name

1. Sign in at [lettrove.com](https://lettrove.com) and go to
   [**Settings → Embed**](https://lettrove.com/settings/embed).
2. Open your project. Each project has its own branding.
3. In **Branding**, type your **Product name**: the name your users know you by, up to 60
   characters.
4. Add your **Logo**, in one of two ways:
   - **Upload** an image: PNG, JPEG, GIF, WebP or SVG. We host it for you, so it keeps working
     whatever happens to your own servers.
   - Or **paste a link** to a logo your product already hosts, such as
     `https://cdn.acme.com/logo.svg`.
5. Check the **Preview**. It draws the bar exactly as your users will see it, at the same size.
6. Click **Save branding**.

An editor that opens after you save shows it. One already open keeps what it opened with until it
next opens, so nobody's screen changes under them. Saving again replaces it; leave a field empty
and save to show no name, or no logo.

## What a logo needs

**The shape that reads best** is a wide logo, about 24 pixels tall. The bar draws it **at most 24px
tall and 160px wide**, keeping its proportions, so:

| Your logo | How it shows |
|---|---|
| Wide wordmark, e.g. 480 × 72 | Fills the space: 160 × 24 |
| Square icon, e.g. 512 × 512 | 24 × 24, with your product name beside it |
| Very wide, e.g. 1200 × 60 | 160 × 8: too small to read. Crop the empty space around it |

With a square icon, set the product name too, so the bar shows your icon and name together. With a
wordmark that already says your name, you can leave the name empty.

**Light and dark mode.** The editor follows your user's light or dark setting (see
[Branding](./branding.md)), and your logo sits on whichever background is showing. An **SVG**, or a
**PNG with a transparent background**, looks right on both. A dark logo can disappear on a dark
editor: switch lettrove.com to dark mode and the **Preview** shows you how it looks there. If it
disappears, use a version of your logo that reads on both, such as your coloured mark rather than
black text.

**Sharp on every screen.** Upload an SVG, or a PNG at least twice the size it is drawn (48px tall),
so it stays crisp on high-resolution screens.

**An uploaded SVG** is checked before we host it. One that contains a script, an event handler, a
link or embedded object, foreign content, an external resource or stylesheet, a `javascript:` URL
or XML entities is refused, with the reason. Export it again without that part, or upload a PNG.

**A link you paste** must be the full `https://` address of the image on a public site: not
`http://`, not `localhost`, not a bare IP address, at most 2000 characters. The editor loads it from
there every time it opens: if the address stops working, your users see a broken image in the bar
until you fix it. Use an address that never changes, or upload the file so we host it.

## Why it is not in your code

Anyone can change a web page's code in their browser. If the name and logo came from
`createEditor`, anyone could put another company's name on your editor, or take yours off. So they
come only from your project's settings, which only your team can change.

A `branding.logo` or `branding.name` passed in code is therefore ignored, and your project's
settings are drawn instead. The one branding option your page has is
`branding: { poweredBy: true }`, which adds "Powered by Lettrove"; it can turn that on, never off.

## Common questions

**I changed my logo but the editor still shows the old one.** An editor keeps what it opened with.
Close it and open it again (reload the page).

**Can each of my customers have their own logo?** The logo and name belong to the project, so every
editor a project opens shows the same ones: yours. To show different brands, use a project for each.

**Does the logo appear in the emails my users make?** No. Branding changes the editor, never the
design being edited. A logo *inside* a design is an image your user places there, like any other.

**Do test and live keys show the same branding?** Yes: both belong to the same project.

## For your AI assistant

- The logo and product name are set in Settings → Embed → Branding at lettrove.com, per project,
  never in code. `branding.logo` and `branding.name` in `createEditor` (or the `branding` prop)
  are ignored.
- The bar draws the logo at most 24px tall and 160px wide; the product name is up to 60
  characters.
- Uploads: PNG, JPEG, GIF, WebP or SVG (SVGs without scripts or external content). Links: a full
  public `https://` address.
- Changes show in editors opened after saving.