# Site Identity & Logo

## Site Identity & Logo

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

### Name, Description, And Address
```toml
# src/config/config.toml
[site]
  title            = "Ecozen"
  description      = ""
  tagline          = ""
  taglineSeparator = ""      # empty uses " - "
  baseUrl          = "https://example.com"   # placeholder: set your own address
```

- `title` is your business name. It is also the large wordmark at the bottom of the footer and the business name in the structured data.
- `description` is the default text under your link in search results and social previews. Pages with their own `description` or `metaDescription` use theirs. Empty uses `seo.siteDescription` in each `src/i18n/<lang>.json`. A value here is used for every language.
- `tagline` is added to every page title: "Pricing - your tagline". Empty uses `seo.tagline` in each `src/i18n/<lang>.json`, so change it there. A value here is used for every language. 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`, the RSS feed, `llms.txt`, structured data, and social previews are built from it. While it is still `https://example.com`, `npm run build` prints a yellow `[site]` warning when the Astro build finishes. See [SEO & AI Visibility](/ecozen/customization/seo-ai-visibility/) for the `SITE_URL` override.

### Logo
Ecozen uses two logo files, because the logo sits on both light and dark backgrounds:

```toml
[site]
  logo          = "/images/logo.svg"          # src/assets/images/logo.svg
  logoAlternate = "/images/logo-footer.svg"   # src/assets/images/logo-footer.svg
  logoText      = ""
  logoWidth     = "132px"
  logoHeight    = "32px"
```

| Key             | Where it shows                                                                      |
| --------------- | ----------------------------------------------------------------------------------- |
| `logo`          | The header on every page, once it has a solid background                            |
| `logoAlternate` | The dark footer layouts, and the `transparent` header over the photo on the homepage and `/services/` |

Put your files in `src/assets/images/` and point the keys at them with a path that starts with `/images/`. SVG is best; PNG works too. Set `logoWidth` and `logoHeight` to the header size you want, keeping your logo's proportions. On phones the logo is drawn a little narrower.

`logoText` adds text beside the image, for a logo mark without a name. Leave it empty when the name is part of the file.

<Aside type="tip">
  If you only have one logo, make a white or light version for
  `logoAlternate`. A dark logo disappears on the dark footer and on the
  homepage photo.
</Aside>

### Favicons
The small icon in the browser tab. Ecozen creates every size browsers and phones need from one image:

1. Save a square image of your mark (SVG or a PNG of at least 512×512 px) in `src/assets/images/`.
2. Point `[site.favicon] image` at it:

   ```toml
   [site.favicon]
     path  = "/images/favicons"   # leave as it is
     image = "/images/favicon.png"
   ```

3. Run:

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

The generated files are written to `public/images/favicons/`. Hard-refresh the browser (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd>) to see the new icon; browsers cache favicons for a long time.

### Social Preview Image
When someone shares a link to your site, the preview card uses:

1. the page's own `image`, if it has one (cropped to 1200×630), or
2. the shared image in `[opengraph] image`.

```toml
[opengraph]
  image = "/images/og-image.jpg"   # public/images/og-image.jpg
```

The shipped `public/images/og-image.jpg` shows the Ecozen demo, so replace it with a 1200×630 image of your own. More in [SEO & AI Visibility](/ecozen/customization/seo-ai-visibility/).

### Do It With AI
```text
Rebrand the site to "[NAME]". In src/config/config.toml set [site] title, tagline, description,
and baseUrl "[URL]", and [seo] author. I put my logos at src/assets/images/[DARK FILE] and
src/assets/images/[LIGHT FILE]; set [site] logo and logoAlternate to them with logoWidth and
logoHeight for a 32px-tall header logo, and set [site.favicon] image to "/images/[SQUARE FILE]".
Then tell me which npm commands to run.
```