Site Identity & Logo

Kivo Theme Documentation

Files: src/config/config.toml, src/assets/images/ · Skill level: Beginner

Name, Description, And Address

[site]
  title            = "Kivo"
  description      = "A SaaS theme for software, AI, API, and dev tool startups: ..."
  tagline          = "Astro SaaS Theme for Software, AI & APIs"
  taglineSeparator = ""      # empty uses " - "
  baseUrl          = "https://example.com"   # placeholder: set your own address

title is your brand name. It also replaces {brand} in the footer copyright.
description is the default text under your link in search results and social previews. Pages with their own description or metaDescription use theirs.
tagline is added to every page title: “Pricing - your tagline”. Set disableTagline: true in a page’s frontmatter to drop it on that page.
baseUrl must be your real address before you launch. Canonical links, the sitemap, robots.txt, RSS feeds, llms.txt, and social previews are built from it. While it is still https://example.com, npm run build prints a yellow [site] warning when the Astro build finishes. See SEO & AI Visibility for the SITE_URL override.

Logo

You have two options:

Built-in mark
Your own logo

With logo = "", Kivo draws its own mark: a rounded tile with a letter and a dot in your primary color. It switches colors on its own in dark mode and animates on hover. Change the text beside it with logoText.

[site]
  logo     = ""
  logoText = "Acme"

Developers can change the shape of the mark in src/lib/brandMark.ts (tile radius, letter path, and dot position). The header, the footer, and the generated social cards all draw it from there.

Put your file in src/assets/images/ (SVG is best; PNG and JPG work too) and point logo at it with a path that starts with /images/:

[site]
  logo       = "/images/acme-logo.svg"
  logoText   = ""        # empty if your logo already includes the name
  logoWidth  = "120px"
  logoHeight = "28px"

Set logoWidth and logoHeight to the size you want in the header, keeping your logo’s proportions. Your logo also appears on the generated social preview cards.

The logo appears in the header, the footer, the log-in and sign-up screens, and the social preview cards.

Favicons

The small icon in the browser tab. Kivo creates every size browsers and phones need from one image:

Save a square image of your mark (SVG or a PNG of at least 512×512 px) in src/assets/images/.

Point [site.favicon] image at it:

[site.favicon]
  path  = "/images/favicons"   # leave as it is
  image = "/images/favicon.svg"

Run:
Terminal window
```
npm run generate-favicons
```

The generated files are written to public/images/favicons/. Hard-refresh the browser (Ctrl + Shift + R) to see the new icon; browsers cache favicons for a long time.

When someone shares a link to your site, the preview card uses:

the page’s own image, if it has one, or
a card Kivo draws at build time (logo, section, title, and description, in your colors and font), when [opengraph] generateImages = true, or
the shared image in [opengraph] image.

After you change the logo, colors, font, or tagline, redraw the shared image:

npm run generate-og-image

It writes public/images/og-image.jpg using [opengraph] theme (light or dark). More in SEO & AI Visibility.

Do It With AI

Rebrand the site to "[NAME]". In src/config/config.toml set [site] title, logoText, tagline,
description, and baseUrl "[URL]", and [seo] author. I put my logo at src/assets/images/[FILE];
set [site] logo to "/images/[FILE]" with logoWidth/logoHeight for a 28px-tall header logo, and
set [site.favicon] image to "/images/[SQUARE FILE]". Then tell me which npm commands to run.