# Site Identity & Logo

## Site Identity & Logo

Finzo keeps all brand settings in `src/config/config.toml`, and the shared logo
component lives in `src/layouts/components/global/Logo.astro`.

### Brand Settings In `config.toml`
To set the title, description, and logo shown in the header and footer, edit the
`[site]` section of `src/config/config.toml`:

```toml
# src/config/config.toml
[site]
  title            = "Finzo" # Shared title for SEO and OpenGraph
  description      = "Fintech, finance & banking astro theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
  tagline          = "Fintech, Finance & Banking Astro Js Theme"
  taglineSeparator = "" # default is " - "
  baseUrl          = "https://finzo-astro.pages.dev" # Base URL for the site and used in OpenGraph meta tags.
  logo             = "/images/logo.svg" # Path to the site's logo
  logoText         = "Finzo" # Text displayed next to the logo
  logoWidth        = "2rem" # Width of the logo
  logoHeight       = "2rem" # Height of the logo
  trailingSlash    = true # Add a trailing slash at the end of URLs
```

- `title`: used for SEO, Open Graph, and as fallback branding
- `description`: shared meta description
- `tagline`: appended to page titles (separated by `taglineSeparator`) unless a page sets `disableTagline: true`
- `baseUrl`: production URL used for canonical links, sitemap, and Open Graph tags
- `logo`: path to the logo image (relative to `/public`)
- `logoText`: text rendered next to the logo image (leave empty to show only the image)
- `logoWidth` and `logoHeight`: rendered dimensions; accept `rem` or `px` units (e.g. `"2rem"` or `"32px"`)

### How Finzo Renders The Logo
`Logo.astro` renders the `logo` image and, when `logoText` is set, a text label
beside it. If no `logo` image is provided, it falls back to `logoText`, then to
the site `title`.

```astro
// src/layouts/components/global/Logo.astro
<OptimizedImage
  src={src ? src : logo}
  class="logo"
  width={getNumber(logoWidth)}
  height={getNumber(logoHeight)}
  alt={toSentenceCase("Brand logo of " + title)}
  style={{
    height: getNumber(logoHeight) + "px",
    width: getNumber(logoWidth) + "px",
  }}
/>
{logoText && <span class="logo-text" set:html={markdownify(logoText)} />}
```

<Aside type="note">
  Finzo does not use a separate dark-mode/alternate logo field. Set `logo` for
  the image and `logoText` for the optional text label — that is all the component
  reads.
</Aside>

### Favicon Setup
Favicons appear in browser tabs and on mobile home screens. Finzo generates them
from a single source image defined in `[site.favicon]`:

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

Then regenerate the favicon assets:

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

This runs `scripts/generate-favicons.mjs`, which writes the generated icons into
the directory set by `path` (`/images/favicons`).

### SEO Metadata
Search-engine metadata lives in the `[seo]` section. Update the author and
keywords to match your project:

```toml
# src/config/config.toml
[seo]
  author = "Getastrothemes"
  keywords = [
    "banking astro theme",
    "finance astro theme",
    "fintech astro theme",
    "finance business astro theme",
    "startup astro theme",
  ] # SEO keywords
  robots = "index, follow" # Instructs search engines on how to crawl and index the pages.
```

- `author`: site author or organization
- `keywords`: keywords used in the page metadata
- `robots`: default crawl directive (e.g. `index, follow`)

You can also edit:

- `[seo.robotsTxt]` and `[seo.sitemap]` to control `robots.txt` and sitemap generation
- `[opengraph]` for social share previews (`image`, `ogLocale`, `twitter`, `twitterCard`)
- `[head]` for custom scripts, stylesheets, and meta tags injected into `<head>`

### Good First Branding Pass
1. Replace `title`, `description`, and `tagline` in `[site]`
2. Replace the `logo` image and update `logoText`, `logoWidth`, and `logoHeight`
3. Set your `baseUrl` to your production URL
4. Point `[site.favicon].image` at your logo and run `npm run generate-favicons`
5. Update `[seo]` and `[opengraph]`
6. Check `src/i18n/en.json` (and `fr.json`) so footer and button text match the new brand

🚀 You've customized the site's identity and logo—now it's time to update the fonts and colors!