Site Identity & Logo

Lumio Theme Documentation

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

[site]
  title       = "Lumio"
  description = "Lumio is a modern, high-performance Astro theme crafted for IT companies, digital agencies, and consulting firms."
  logo        = "/images/logo.png"
  logoWhite   = "/images/logo-white.png"
  logoText    = "Lumio"
  logoWidth   = "30px"
  logoHeight  = "30px"

logo: Default logo path.
logoWhite: Alternate logo used by dark/blue variants such as FooterTwo.
logoText: Text rendered next to the logo.
logoWidth & logoHeight: Control the rendered logo dimensions.

Lumio already supports an alternate logo color through logoWhite. The shared Logo.astro component switches between logo and logoWhite based on the variant prop:

<div class="flex flex-col">
  <Logo variant="blue" />
  <p class="text-text-inverse/50 mt-8">
    {t("footerBlock.description")}
  </p>
</div>

If you want a fully custom footer logo, you can also pass a manual src prop to Logo.astro.

Logo Rendering Logic

The actual logo switching behavior is implemented in:

<OptimizedImage
  src={src ? src : variant === "blue" ? logoWhite : logo}
  class="logo"
  width={getNumber(logoWidth)}
  height={getNumber(logoHeight)}
  alt={toSentenceCase("Brand logo of " + title)}
/>

Set Up Your Favicon

Favicons are configured in the same file:

[site.favicon]
  image = "/images/logo.png"

Generate Favicons

Put your source logo in the location referenced by image.
Run:
Terminal window
```
npm run generate-favicons
```
Lumio will generate favicon assets for multiple platforms.

Customize SEO Metadata

Lumio also exposes basic SEO settings in config.toml:

[seo]
  author   = "Getastrothemes"
  keywords = ["lumio astro theme", "startup astro 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.