# Site Identity & Logo

## Site Identity & Logo

Techlo exposes its branding settings through `src/config/config.toml`, and the shared logo rendering logic lives in `src/layouts/components/global/Logo.astro`.

In the Tina edition, these settings are under **Site** and **Seo** in **Site settings** at `/admin/`. In the Sanity edition, they are under **Site settings > Site** and **SEO** in the Studio. Favicons stay in `config.toml` in every edition.

### Set Your Site Address

Set `baseUrl` under `[site]` to your domain. Canonical links, the sitemap, `robots.txt`, `llms.txt`, and Open Graph URLs use it. It ships as `https://example.com`, and a build prints a warning until you change it. A `SITE_URL` environment variable overrides `baseUrl` for a build.

### Customize Your Logo

To set the logo used across the theme, edit the `[site]` section in `config.toml`:

```toml {6-11}
# src/config/config.toml
[site]
  title         = "Techlo"
  description   = "Techlo delivers managed IT services, cloud consulting, cybersecurity, software development, and digital transformation support for growing teams."
  tagline       = "IT Solutions & Services Astro & Tailwind CSS Theme"
  logo          = "/images/logo.svg"
  logoAlternate = ""
  logoText      = "Techlo"
  logoWidth     = "24px"
  logoHeight    = "36px"
```

- **`logo`**: Default logo path used on light headers and the footer.
- **`logoAlternate`**: Alternate logo used automatically by dark-appearance headers (header layouts **one** and **three**) and the dark footer. Leave empty to always use `logo`.
- **`logoText`**: Text rendered next to the logo (supports inline Markdown).
- **`logoWidth` & `logoHeight`**: Control the rendered logo dimensions.

#### Logo Rendering Logic

The actual logo switching behavior is implemented in `Logo.astro`. When a header has a dark appearance, it passes `logoAlternate` as the `src`; otherwise the default `logo` is used:

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

If you want a fully custom logo in a specific place, you can also pass a manual `src` prop to `Logo.astro`.

### Set Up Your Favicon

Favicons are configured in the same file:

```toml
# src/config/config.toml
[site.favicon]
  path  = "/images/favicons"
  image = "/images/favicon.svg"
```

#### Generate Favicons

1. Put your source logo in `src/assets/images/`, at the path referenced by `image`.
2. Run:

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

3. Techlo will generate favicon assets for multiple platforms into `public/images/favicons/`. You can verify the output with [RealFaviconGenerator’s checker](https://realfavicongenerator.net/checker).

### Customize SEO Metadata

Techlo also exposes basic SEO settings in `config.toml`:

```toml
# src/config/config.toml
[seo]
  author   = "Getastrothemes"
  keywords = ["astro technology template", "it solution theme"]
  robots   = "index, follow"
```

- **`author`**: Author or company name used in metadata.
- **`keywords`**: Search keywords for the site.
- **`robots`**: Crawl/indexing rules for search engines.

Next, update the theme colors and font stack so the brand feels like yours.