Site Identity & Logo

Looka Theme Documentation

Looka 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" # Shared title for SEO and OpenGraph
  description      = "A highly customizable consulting & business astro theme built with Tailwind CSS and Astro Js"
  logo             = "/images/logo.svg" # Path to the site's logo
  logoAlternate    = "" # Optional alternate logo path
  logoText         = "Looka" # Text displayed next to the logo
  logoWidth        = "29px" # Width of the logo
  logoHeight       = "29px" # Height of the logo

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

Looka ships with logo = "/images/logo.svg" and logoText = "Looka". If you remove the logo value, the header falls back to logoText (or the site title when both are empty).

Looka’s footer uses a separate white logo so it stays visible on the dark footer background. The <Logo /> component accepts an optional src prop that overrides the logo value from config.toml. You can see this in src/layouts/components/global/Footer.astro:

<div class="flex flex-col gap-y-5 lg:pe-10">
  <Logo src="/images/logo-white.svg" />
  {
    footerDescription && (
      <p class="opacity-90" set:html={markdownify(footerDescription)} />
    )
  }
  <SocialComponent
    layout="dark"
    linkType="follow"
    class="mt-5 gap-1"
    list={social.main.filter((social) => social.enable)}
  />
</div>

To swap the footer logo, change the src path to your own white/light logo file in public/images/.

Note: Looka’s <Logo /> component reads logo, logoText, logoWidth, and logoHeight from config.toml. The logoAlternate field is present in the config for forward compatibility but is not rendered by the current theme — use the src prop (as the footer does) when you need a second logo.

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   = "Getastrothemes"        # Author name for SEO
  keywords = ["business astro theme, consulting astro 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!