Site Identity & Logo

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
  logo_text      = "Looka"          # Text displayed next to the logo
  logo_width     = "29px"           # Logo width
  logo_height    = "29px"           # Logo height

logo: Path to your main logo.
logo_text: Text next to the logo (if applicable).
logo_width & logo_height: 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" />
  {
    t("footer.description") && (
      <p class="opacity-90" set:html={markdownify(t("footer.description"))} />
    )
  }
  <Social
    layout="dark"
    link_type="follow"
    class="gap-1 mt-5"
    list={social.main}
  />
</div>

Logo Based on Home Page or Other Page

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

Currently, in Looka theme the logo you set in the logo section in config.toml file will be displayed on the home page and the logo you set in the logo_alternate section in config.toml file will be displayed on other pages.

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 path directory.

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!