# Make it yours > The app's name and mark live in two environment variables and one file in public/ — except the browser tab, which is edited in index.html on disk because the head is parsed before any environment is read. Page: https://sdk.chatfuel.com/docs/guides/brand-the-app Markdown: https://sdk.chatfuel.com/docs/guides/brand-the-app.md Three surfaces carry the app's identity: the browser tab, the top bar, and the sign-in screen the `auth` module draws. Two of them read the environment. The tab cannot — `VITE_*` values are baked into the bundle, and the head is parsed before a line of that bundle runs — so the tab is written into `index.html` on disk, once, while the app is being made. That split is the whole of this page. Everything else is one name, one image file, and a rebuild. ### Answer it while the app is being made [#answer-it-while-the-app-is-being-made] The wizard asks twice, near the end, before anything is written: ```bash npx @chatfuel/wizard --app-name "Acme Concierge" --logo ./acme-mark.svg ``` The name is 1–60 characters on one line, because it has to fit a browser tab and a top bar. Leave it out and you are asked, with the Chatfuel workspace's title as the default and `Chatfuel App` behind that. The logo is a path to a file a browser can draw as both an inline mark and a tab icon: `.svg`, `.png`, `.jpg`, `.jpeg`, `.webp`, `.gif` or `.ico`, under a megabyte. Anything else is refused — and refused by the command line, before the token prompt and the workspace lookup, so a mistyped `--logo` costs you nothing. At the prompt the same wrong path is re-asked instead, since you are at a keyboard with the file in front of you. Pressing Enter at the logo prompt keeps the mark the template ships, which is a real logo rather than a placeholder — an app nobody branded still looks finished. `--yes` skips the logo question altogether, so a non-interactive run gets a mark only from `--logo`. Both steps are standalone-only. In `--embed` mode the surrounding project already has a head, a `public/` and a mark of its own, and none of the three are the wizard's to overwrite. ### Read what it wrote [#read-what-it-wrote] Four writes, in three places: The image is copied into `public/` under the name `logo` plus its own extension. If your file is not an SVG, the shipped `logo.svg` is deleted in the same move — an app has exactly one mark, and leaving two behind means the next person to look cannot tell which is live. `.env` gets the two values the running app reads: ```bash title=".env" VITE_APP_NAME=Acme Concierge VITE_APP_LOGO=logo.svg ``` And two lines of `index.html` are rewritten in place. These are the ones the template ships, and the wizard replaces both — the `href`, the `type` and the title text: ```html title="index.html (before)" Chatfuel App ``` `%BASE_URL%` rather than `/logo.svg`: this is the one reference resolved at build time rather than by the app at runtime, so it still points at the right place when the app is [mounted under a sub-path](/docs/deploy/sub-path). If either tag is missing the wizard stops and says the template has drifted, rather than writing an app with no icon. ### Change it afterwards [#change-it-afterwards] Nothing here is one-way. | To change | Do this | | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | The name | `VITE_APP_NAME` in `.env`, and `` in `index.html`. | | The mark | Replace `public/logo.svg`. That is the whole change — the variable already points at it. | | The mark, under another name | Put the file in `public/`, set `VITE_APP_LOGO` to its file name. An absolute path or a full URL works too and is passed through untouched; a bare file name is resolved against the app's base path. | | The tab icon | The `<link rel="icon">` in `index.html`, including its `type`. | `VITE_*` values are compiled into the bundle, so a change to either variable needs a rebuild to be visible. On Vercel that means the project environment rather than your local `.env`, which is never uploaded — `npm run deploy` pushes both, readable in the dashboard, and redeploys. </Step> <Step> ### Look at all three surfaces [#look-at-all-three-surfaces] ```bash npm run dev ``` The **tab** shows the new title and icon on first paint — reload once if the old favicon is cached. The **top bar** shows the mark, with the name beside it above the `sm` breakpoint and the mark alone below it, where the nav has collapsed into a hamburger and the pickers need the room. If you installed the `auth` module, sign out and look at the **sign-in screen**: the same name and mark sit above the card, because a person on that page has no workspace yet to be named after. A path that points at nothing is the failure worth checking by eye. `VITE_APP_LOGO` is resolved into a URL without ever being fetched, so a file that is not in `public/` renders as a broken image rather than an error anywhere. The name is the forgiving one: unset or blank, it falls back to `Chatfuel App`. The shield glyph on the sign-in screen appears only when no mark is passed at all, which in a scaffolded app never happens — that fallback is for an embedding host. </Step> </Steps> ## Beyond the name and the mark [#beyond-the-name-and-the-mark] Colors, radii, shadows, type and motion are not environment variables — they are the design system, and it lives in your project as source rather than as a package. Every component in it is written against semantic utilities and none of them carries a hardcoded color, so a rebrand is an edit to one token file that moves both themes at once. That is [Change how it looks](/docs/guides/customize-the-design-system), and the names are on the [token reference](/docs/reference/ui/tokens).