Techbyte Theme Documentation

Site Identity & Logo

Techbyte 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         = "Techbyte"
  description   = "Techbyte 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.png"
  logoAlternate = "/images/logo-footer.png"
  logoText      = ""
  logoWidth     = "140px"
  logoHeight    = "34.22px"

• logo: Default logo path used in the headers.
• logoAlternate: Alternate (light) logo used in the footer and the header offcanvas panel.
• logoText: Optional text rendered next to the logo (supports inline Markdown). Techbyte ships with an image-only logo, so this is empty by default.
• logoWidth & logoHeight: Control the rendered logo dimensions.

Logo Rendering Logic

The switching behavior is implemented in Logo.astro. SVG logos are inlined automatically for crisp rendering:

src/layouts/components/global/Logo.astro

<OptimizedImage
  src={mainLogo}
  inlineSvg={mainLogo?.endsWith(".svg")}
  class="logo"
  alt={toSentenceCase("Brand logo of " + title)}
  style={{ height: logoHeight, width: logoWidth }}
/>
{logoAlternate && (
  <OptimizedImage src={logoAlternate} class="logo-alternate" ... />
)}

If you want a fully custom logo in a specific place, you can also pass a manual src prop (plus width/height) 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. Techbyte will generate favicon assets for multiple platforms into path. You can verify the output with RealFaviconGenerator’s checker.

Customize SEO Metadata

Techbyte also exposes basic SEO settings in config.toml:

src/config/config.toml

[seo]
  author   = "Getastrothemes"
  keywords = ["it solutions astro theme", "managed it services website template"]
  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.