Site Identity & Logo

Common Documentation

Each of our themes makes it easy to customize your site’s branding, including the logo and favicon, through the config.toml file.

Customize Your Logo

To set your logo that will be displayed on the header and footer, edit the [site] section in the config.toml file:

[site]
  title          = "Looka"          # Your site's title for SEO and OpenGraph
  description    = "A business & consulting theme"  # Your site's description
  logo           = "/images/logo.svg"  # Path to your logo file
  logoText       = "Looka"          # Text displayed next to the logo
  logoWidth      = "29px"           # Logo width
  logoHeight     = "29px"           # Logo height
  logoAlternate  = ""               # Optional alternate logo (if supported by the theme)

logo: Path to your main logo.
logoText: Text next to the logo (if applicable).
logoWidth & logoHeight: Adjust the size of your logo.

If you want to use a different logo for footer, locate the <Logo /> component in src/layouts/components/global/Footer.astro file and update it as illustrated below.

<div class="flex flex-col gap-y-5 lg:pe-10">
  <Logo />
  <Logo src="/images/logo-white.svg" />
</div>

Logo Based on Home Page or Other Page

You may want to use different logos based on the page.

Some themes support an alternate logo (via logoAlternate) for specific contexts, such as non-home pages. If your theme’s header uses logoAlternate, set it in config.toml. If not, it will be ignored.

Set Up Your Favicon

Favicons appear in browser tabs and are essential for branding.

[site.favicon]
  path  = "/images/favicons"  # Favicon storage path
  image = "/images/logo.svg"  # Use your logo here

Generate Favicons

Place your logo image in the image path.
Run this command in your terminal:
Terminal window
```
npm run generate-favicons
```
The tool will create favicons for various platforms and save them to the directory specified in path.

Customize SEO Metadata

Optimize your site for search engines with these SEO settings in config.toml:

[seo]
  author   = "Your Name"             # Author name for SEO
  keywords = ["business theme", "consulting theme"]  # SEO keywords
  robots   = "index, follow"         # Search engine crawl rules

author: Set the author or organization for SEO.
keywords: Add keywords to improve search ranking.
robots: Control search engine crawling (e.g., “index, follow” to allow indexing).

🚀 You’ve customized the site’s identity and logo—now it’s time to update the fonts and colors!