Branding¶

The branding block in your project's settings.json sets your app's title, logo, and the name its saved data is stored under. Colors are in your project's theme.json; see Theme.

"branding": { "title": "My App", "appId": "my-app", "logo": "/logo.svg" }

Fields¶

Field	Type	Default	Description
`title`	`string`	required	App name, shown in the top bar and as the browser tab's title. Link previews and search engines don't run the app, so they read the `<title>` in `app/index.html`; edit that too if previews matter
`logo`	`string`	none	Path to a logo shown in the top bar. Put the file in your project's `public/` and reference it, e.g. `/logo.svg`
`appId`	`string`	slug of `title`	Prefix for every localStorage key the app writes (bookmarks, saved drawings, the info modal's "don't show again"). Give each app its own `appId` when several are served from one domain, so their saved data stays separate

Logo & favicon¶

The demo uses an SVG of the ⛰️ emoji for both the top-bar logo (public/logo.svg in the demo project) and the favicon (public/favicon.svg); new projects start with the same two files. To use your own, put an image in your project's public/ and point branding.logo at it. The theme doesn't recolor the logo, so pick one that reads on your top bar. Set its size with ui.topBar.logoSize and mobileLogoSize.

The top bar nudges the logo up by 8% of its height, because the default emoji logo sits low in its image. A custom logo that's already centered in its file may sit slightly high; if it shows, add a little transparent space at the top of the image or trim some from the bottom. The logo, title and ⓘ button are evenly spaced: 12px apart on desktop, 8px on mobile.