Site Identity & Logo

Finzo Theme Documentation

Finzo keeps all brand settings in src/config/config.toml, and the shared logo component lives in src/layouts/components/global/Logo.astro.

Brand Settings In`config.toml`

To set the title, description, and logo shown in the header and footer, edit the [site] section of src/config/config.toml:

[site]
  title            = "Finzo" # Shared title for SEO and OpenGraph
  description      = "Fintech, finance & banking astro theme built with Tailwind CSS and Astro Js" # Shared description for SEO and OpenGraph
  tagline          = "Fintech, Finance & Banking Astro Js Theme"
  taglineSeparator = "" # default is " - "
  baseUrl          = "https://finzo-astro.pages.dev" # Base URL for the site and used in OpenGraph meta tags.
  logo             = "/images/logo.svg" # Path to the site's logo
  logoText         = "Finzo" # Text displayed next to the logo
  logoWidth        = "2rem" # Width of the logo
  logoHeight       = "2rem" # Height of the logo
  trailingSlash    = true # Add a trailing slash at the end of URLs

title: used for SEO, Open Graph, and as fallback branding
description: shared meta description
tagline: appended to page titles (separated by taglineSeparator) unless a page sets disableTagline: true
baseUrl: production URL used for canonical links, sitemap, and Open Graph tags
logo: path to the logo image (relative to /public)
logoText: text rendered next to the logo image (leave empty to show only the image)
logoWidth and logoHeight: rendered dimensions; accept rem or px units (e.g. "2rem" or "32px")

How Finzo Renders The Logo

Logo.astro renders the logo image and, when logoText is set, a text label beside it. If no logo image is provided, it falls back to logoText, then to the site title.

<OptimizedImage
  src={src ? src : logo}
  class="logo"
  width={getNumber(logoWidth)}
  height={getNumber(logoHeight)}
  alt={toSentenceCase("Brand logo of " + title)}
  style={{
    height: getNumber(logoHeight) + "px",
    width: getNumber(logoWidth) + "px",
  }}
/>
{logoText && <span class="logo-text" set:html={markdownify(logoText)} />}

Favicon Setup

Favicons appear in browser tabs and on mobile home screens. Finzo generates them from a single source image defined in [site.favicon]:

[site.favicon]
  path  = "/images/favicons" # favicon images path (No need to change it)
  image = "/images/logo.svg" # Source image used to generate favicons

Then regenerate the favicon assets:

npm run generate-favicons

This runs scripts/generate-favicons.mjs, which writes the generated icons into the directory set by path (/images/favicons).

SEO Metadata

Search-engine metadata lives in the [seo] section. Update the author and keywords to match your project:

[seo]
  author = "Getastrothemes"
  keywords = [
    "banking astro theme",
    "finance astro theme",
    "fintech astro theme",
    "finance business astro theme",
    "startup astro theme",
  ] # SEO keywords
  robots = "index, follow" # Instructs search engines on how to crawl and index the pages.

author: site author or organization
keywords: keywords used in the page metadata
robots: default crawl directive (e.g. index, follow)

You can also edit:

[seo.robotsTxt] and [seo.sitemap] to control robots.txt and sitemap generation
[opengraph] for social share previews (image, ogLocale, twitter, twitterCard)
[head] for custom scripts, stylesheets, and meta tags injected into <head>

Good First Branding Pass

Replace title, description, and tagline in [site]
Replace the logo image and update logoText, logoWidth, and logoHeight
Set your baseUrl to your production URL
Point [site.favicon].image at your logo and run npm run generate-favicons
Update [seo] and [opengraph]
Check src/i18n/en.json (and fr.json) so footer and button text match the new brand

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