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:

[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:

<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:

[site.favicon]
  path  = "/images/favicons"
  image = "/images/favicon.svg"

Generate Favicons

Put your source logo in src/assets/images/, at the path referenced by image.
Run:
Terminal window
```
npm run generate-favicons
```
Techlo will generate favicon assets for multiple platforms into public/images/favicons/. You can verify the output with RealFaviconGenerator’s checker.

Customize SEO Metadata

Techlo also exposes basic SEO settings in 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.