# Site Identity & Logo

## Site Identity & Logo

**Files:** `src/config/config.toml`, `src/lib/brandMark.ts`, `src/assets/images/` · **Skill level:** Beginner

Your site's name, the line after every page title, the logo in the header and footer, the small icon in the browser tab, and the card people see when they share a link. Your phone, address, and opening hours are separate: see [Business Info](/homio/customization/business-info/).

### Name, Tagline, And Address
```toml
# src/config/config.toml
[site]
  title            = "Homio"
  description      = "An Astro and Tailwind CSS theme for cleaning, handyman, window, and carpet companies: ..."
  tagline          = "Cleaning & Home Services Astro & Tailwind CSS Theme"
  taglineSeparator = ""   # default is " - "
  baseUrl          = "https://example.com"   # PLACEHOLDER: set your own domain before deploying
```

- `title` is your brand name. It is the `{brand}` in the footer copyright, the name on the social cards, and the business name in structured data while `[business] name` is empty. The home page's browser title is the `metaTitle` in `src/content/homepage/english/-index.md` (and `french/`).
- `description` is the default text under your link in search results and social previews. Pages with their own `description` or `metaDescription` use theirs.
- `tagline` is added to every page title: "Pricing - your tagline". The shipped tagline describes the theme, so replace it with a short line about your business, for example "House cleaning in North Harbor". Set `disableTagline: true` in a page's frontmatter to drop it on that page.
- `baseUrl` must be your real address before you launch. Canonical links, the sitemap, `robots.txt`, RSS feeds, `llms.txt`, and social previews are built from it. While it is still `https://example.com`, `npm run build` prints a warning. A `SITE_URL` environment variable on the build overrides it (`vercel.sh` sets one on Vercel).

### The Logo
Homio's logo is a small mark (a rounded green tile with a white check and a sunflower dot) followed by your name in text:

```toml
[site]
  logo       = ""        # Leave empty for the mark in src/lib/brandMark.ts
  logoText   = "homio"   # Text next to the mark, shown exactly as typed (no case change)
  logoWidth  = "28px"    # Only when `logo` is set
  logoHeight = "28px"    # Only when `logo` is set
```

**Change only the name.** Set `logoText` to your name, written the way you want it shown: `"Brightside Cleaning"` stays as typed, with no change to upper or lower case. Check the header at phone width afterwards: a long name has less room next to the menu button.

**Keep the mark, change its color.** The built-in mark is drawn from your color tokens: the tile uses `--color-primary`, the check `--color-on-primary`, and the dot `--color-accent`. When you change those in `src/styles/theme.css`, the mark follows, in light and dark mode and on the green footers. See [Colors & Fonts](/homio/customization/colors-fonts/).

**Change the mark's shape.** `src/lib/brandMark.ts` holds the mark as SVG paths (`tile`, `check`, `checkWidth`, `dot`, on a 32×32 grid). The header, the footer, the announcement bar, and the generated social cards all draw it from this file. Edit it only if you are comfortable with SVG paths.

**Use your own logo file.** Put the file (SVG is best, PNG works) in `src/assets/images/` or `public/`, and point `logo` at it:

```toml
[site]
  logo       = "/images/my-logo.svg"   # src/assets/images/my-logo.svg
  logoText   = ""                       # empty when the name is part of the file
  logoWidth  = "120px"
  logoHeight = "28px"
```

Set `logoWidth` and `logoHeight` to keep your logo's proportions at about 28 px tall.

<Aside type="caution" title="One logo file for every background">
  An image in `logo` is used as it is everywhere: on the white header, in dark
  mode, and on the deep green `minimal` and `columns` footers. Pick a logo that
  reads on light and dark backgrounds, or keep the built-in mark, which changes
  color on its own.
</Aside>

`src/assets/images/logo.svg` and `logo-on-dark.svg` are standalone copies of the Homio logo (mark and name) for light and dark backgrounds. The site doesn't use them; they are there for your email signature or documents. Replace or delete them.

### Favicons
The small icon in the browser tab and on phone home screens. Homio creates every size from one image:

1. Save a square image of your mark in `src/assets/images/`: an SVG, or a PNG of at least 512×512 px. The shipped one is `src/assets/images/favicon.svg`, the Homio mark.
2. Point `[site.favicon] image` at it. The path starts with `/images/` and is read from `src/assets/`:

   ```toml
   [site.favicon]
     path  = "/images/favicons"     # favicon images path (No need to change it)
     image = "/images/favicon.svg"  # src/assets/images/favicon.svg
   ```

3. With `npm run dev` running (it applies your `config.toml` change), run:

   ```bash
   npm run generate-favicons
   ```

The files are written to `public/images/favicons/` (`favicon.ico`, `favicon.svg`, `favicon-96x96.png`, `apple-touch-icon.png`, the web app icons, and `site.webmanifest`). Hard-refresh the browser (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>, or <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> on a Mac) to see the new icon; browsers keep old favicons for a long time.

### Social Preview Images
When someone shares a link to your site, the preview card is, in this order:

1. **The page's own `image`**, if its frontmatter has one, cropped to 1200×630.
2. **A generated card.** With `[opengraph] generateImages = true` (the default), `npm run build` draws a 1200×630 card for every page without an `image`: your logo and `logoText`, the section name (for example "Services"), the page title, and its description, in your fonts and colors.
3. **The shared image** in `[opengraph] image`, when cards are off.

```toml
[opengraph]
  image          = "/images/og-image.jpg"   # public/images/og-image.jpg
  generateImages = true                     # a card for every page without an `image`
  theme          = "light"                  # light | dark: palette for the cards and npm run generate-og-image
```

The generated cards are made during the build only, so you won't see them with `npm run dev`. After a build they are in `dist/og/`.

The shipped `public/images/og-image.jpg` shows the Homio name. Make your own once your name, tagline, colors, and `baseUrl` are set:

```bash
npm run generate-og-image
```

It redraws `public/images/og-image.jpg` with your logo, tagline, and description, in the same style as the page cards. It reads `[site] baseUrl` from `config.toml` (not `SITE_URL`). You can also replace the file with your own 1200×630 image.

More in [SEO & AI Visibility](/homio/customization/seo-ai-visibility/).

### Before You Launch
- [ ] `title`, `tagline`, `description`, and `logoText` describe your business, not the theme.
- [ ] `baseUrl` is your domain.
- [ ] The favicon is your mark, and you ran `npm run generate-favicons`.
- [ ] You ran `npm run generate-og-image`, or replaced `public/images/og-image.jpg`.
- [ ] The header logo looks right at 375 px wide, in light and dark mode.

### Do It With AI
```text
Rebrand the site to "[NAME]". In [site] of src/config/config.toml set title and logoText to
"[NAME]", write a short tagline and description for my business ([WHAT WE DO, WHERE]), and set
baseUrl to "[URL]". [I put my logo at src/assets/images/[FILE].svg: set logo to
"/images/[FILE].svg", logoText to "", and logoWidth / logoHeight for a 28px-tall logo.] Set
[site.favicon] image to "/images/[SQUARE FILE]". Then tell me which npm commands to run.
```