Techlo Theme Documentation

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.

Customize Your Logo

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

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

src/layouts/components/global/Logo.astro

<OptimizedImage
  src={src ? src : logo}
  class="logo"
  alt={toSentenceCase("Brand logo of " + title)}
  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:

src/config/config.toml

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

Generate Favicons

1. Put your source logo in the location referenced by image.

2. Run:

   npm run generate-favicons

3. Techlo will generate favicon assets for multiple platforms into path. You can verify the output with RealFaviconGenerator’s checker.

Customize SEO Metadata

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