# Site Identity & Logo

## Site Identity & Logo

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

### Name, Tagline, And Description
```toml
[site]
  title            = "Acme Tasks"
  description      = "Plan projects and ship work together in one calm workspace."
  tagline          = "Task management for remote teams"
  taglineSeparator = ""   # empty uses " - "

[seo]
  author   = "Acme Inc."
  keywords = ["task management", "team collaboration"]
```

- `title` is the brand name: structured data, the `{brand}` placeholder in the copyright line, and the alt text of a custom logo use it.
- `tagline` is added to the end of every page title in the browser tab and in search results ("Pricing - Task management for remote teams"). A page turns it off with `disableTagline: true` in its frontmatter.
- The tagline can be translated: set `"tagline"` under `"site"` in `src/i18n/en.json` and `src/i18n/fr.json`. A value there wins over `config.toml` for that language.
- `description` is the default meta description and social preview text for pages that don't set their own.

### Use Your Own Logo
With `logo = ""`, Taskly draws its built-in mark (a white check on a lilac `primary` tile with a lime dot), so it follows your brand color. To use your own image:

<Steps>

1. Put the file in `src/assets/images/`, for example `src/assets/images/my-logo.svg`. SVG gives the sharpest result; PNG and WebP work too.

2. Point `config.toml` at it. Paths that start with `/images/` are read from `src/assets/images/`:

   ```toml
   [site]
     logo       = "/images/my-logo.svg"
     logoDark   = ""             # optional: a light version for the dark footer
     logoText   = "Acme Tasks"   # "" when the image already contains the name
     logoWidth  = "32px"
     logoHeight = "32px"
   ```

3. Check the header and the footers. The `default` footer of inner pages is dark: the built-in mark and `logoText` turn white there on their own, but an image is shown as it is. The `newsletter` and `tiles` footers are light and show `logo`; the `wordmark` footer on `/` prints `logoText` (or the site `title` when it is empty) as large text instead of a logo. If your logo is dark, add a light version (for example a white SVG) to `src/assets/images/` and set it as `logoDark`:

   ```toml
   [site]
     logo     = "/images/my-logo.svg"
     logoDark = "/images/my-logo-white.svg"   # used in the dark footer; empty uses `logo` there too
   ```

   `logoDark` uses the same size (`logoWidth`, `logoHeight`) and only replaces a custom `logo`; the built-in mark needs neither.

</Steps>

`src/assets/images/logo.svg` is a copy of the built-in mark you can use as a starting point.

### Favicons
<Steps>

1. Put a square image (SVG or a PNG of at least 512×512) in `src/assets/images/`, and set it in `config.toml`:

   ```toml
   [site.favicon]
     path  = "/images/favicons"      # leave as it is
     image = "/images/favicon.svg"   # your square logo
   ```

2. Run:

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

   It writes every size (`favicon.ico`, `favicon.svg`, Apple touch icon, web app icons, and `site.webmanifest`) to `public/images/favicons/`.

</Steps>

### Social Sharing Image
When a page is shared in a chat app or on social media, the preview shows an image:

- Pages with an `image` in their frontmatter use that image.
- Other pages get a card drawn during `npm run build` with the logo, the section, the page title, and the description (`[opengraph] generateImages = true`).
- `[opengraph] image` (`/images/og-image.jpg`, in `public/`) is the shared fallback. Redraw it from your logo, colors, fonts, tagline, and description with:

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

  Run it after you change the brand, `baseUrl`, colors, or fonts. `[opengraph] theme` (`light` or `dark`) picks the palette for both the cards and this image.

### Contact Details
The contact page shows its emails, booking slots, and support chat from its own section files (`contact-cards-section.md` and `contact-message-section.md`), so edit those for your real details. `config.toml` has no site-wide contact block.

### Do It With AI
```text
Rebrand the site identity to [NAME], tagline "[TAGLINE]", description "[DESCRIPTION]". Edit [site]
and [seo] in src/config/config.toml, and "tagline" under "site" in src/i18n/en.json and fr.json
(translate it for French). My logo is src/assets/images/[FILE]; set logo, logoText, logoWidth, and
logoHeight, set logoDark to [LIGHT FILE] (a light version for the dark footer) or leave it empty,
and set [site.favicon] image. Then tell me which commands to run for the favicons and the social
image.
```