Site Identity & Logo

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

Your site’s name, the line after every page title, the logo in the header and footer, the small icon in the browser tab, and the card people see when they share a link. Your phone, address, and opening hours are separate: see Business Info.

Name, Tagline, And Address

[site]
  title            = "Homio"
  description      = "An Astro and Tailwind CSS theme for cleaning, handyman, window, and carpet companies: ..."
  tagline          = "Cleaning & Home Services Astro & Tailwind CSS Theme"
  taglineSeparator = ""   # default is " - "
  baseUrl          = "https://example.com"   # PLACEHOLDER: set your own domain before deploying

title is your brand name. It is the {brand} in the footer copyright, the name on the social cards, and the business name in structured data while [business] name is empty. The home page’s browser title is the metaTitle in src/content/homepage/english/-index.md (and french/).
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”. The shipped tagline describes the theme, so replace it with a short line about your business, for example “House cleaning in North Harbor”. 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 warning. A SITE_URL environment variable on the build overrides it (vercel.sh sets one on Vercel).

The Logo

Homio’s logo is a small mark (a rounded green tile with a white check and a sunflower dot) followed by your name in text:

[site]
  logo       = ""        # Leave empty for the mark in src/lib/brandMark.ts
  logoText   = "homio"   # Text next to the mark, shown exactly as typed (no case change)
  logoWidth  = "28px"    # Only when `logo` is set
  logoHeight = "28px"    # Only when `logo` is set

Change only the name. Set logoText to your name, written the way you want it shown: "Brightside Cleaning" stays as typed, with no change to upper or lower case. Check the header at phone width afterwards: a long name has less room next to the menu button.

Keep the mark, change its color. The built-in mark is drawn from your color tokens: the tile uses --color-primary, the check --color-on-primary, and the dot --color-accent. When you change those in src/styles/theme.css, the mark follows, in light and dark mode and on the green footers. See Colors & Fonts.

Change the mark’s shape. src/lib/brandMark.ts holds the mark as SVG paths (tile, check, checkWidth, dot, on a 32×32 grid). The header, the footer, the announcement bar, and the generated social cards all draw it from this file. Edit it only if you are comfortable with SVG paths.

Use your own logo file. Put the file (SVG is best, PNG works) in src/assets/images/ or public/, and point logo at it:

[site]
  logo       = "/images/my-logo.svg"   # src/assets/images/my-logo.svg
  logoText   = ""                       # empty when the name is part of the file
  logoWidth  = "120px"
  logoHeight = "28px"

Set logoWidth and logoHeight to keep your logo’s proportions at about 28 px tall.

src/assets/images/logo.svg and logo-on-dark.svg are standalone copies of the Homio logo (mark and name) for light and dark backgrounds. The site doesn’t use them; they are there for your email signature or documents. Replace or delete them.

Favicons

The small icon in the browser tab and on phone home screens. Homio creates every size from one image:

Save a square image of your mark in src/assets/images/: an SVG, or a PNG of at least 512×512 px. The shipped one is src/assets/images/favicon.svg, the Homio mark.

Point [site.favicon] image at it. The path starts with /images/ and is read from src/assets/:

[site.favicon]
  path  = "/images/favicons"     # favicon images path (No need to change it)
  image = "/images/favicon.svg"  # src/assets/images/favicon.svg

With npm run dev running (it applies your config.toml change), run:
Terminal window
```
npm run generate-favicons
```

The files are written to public/images/favicons/ (favicon.ico, favicon.svg, favicon-96x96.png, apple-touch-icon.png, the web app icons, and site.webmanifest). Hard-refresh the browser (Ctrl + Shift + R, or Cmd + Shift + R on a Mac) to see the new icon; browsers keep old favicons for a long time.

When someone shares a link to your site, the preview card is, in this order:

The page’s own image, if its frontmatter has one, cropped to 1200×630.
A generated card. With [opengraph] generateImages = true (the default), npm run build draws a 1200×630 card for every page without an image: your logo and logoText, the section name (for example “Services”), the page title, and its description, in your fonts and colors.
The shared image in [opengraph] image, when cards are off.

[opengraph]
  image          = "/images/og-image.jpg"   # public/images/og-image.jpg
  generateImages = true                     # a card for every page without an `image`
  theme          = "light"                  # light | dark: palette for the cards and npm run generate-og-image

The generated cards are made during the build only, so you won’t see them with npm run dev. After a build they are in dist/og/.

The shipped public/images/og-image.jpg shows the Homio name. Make your own once your name, tagline, colors, and baseUrl are set:

npm run generate-og-image

It redraws public/images/og-image.jpg with your logo, tagline, and description, in the same style as the page cards. It reads [site] baseUrl from config.toml (not SITE_URL). You can also replace the file with your own 1200×630 image.

Before You Launch

title, tagline, description, and logoText describe your business, not the theme.
baseUrl is your domain.
The favicon is your mark, and you ran npm run generate-favicons.
You ran npm run generate-og-image, or replaced public/images/og-image.jpg.
The header logo looks right at 375 px wide, in light and dark mode.

Do It With AI

Rebrand the site to "[NAME]". In [site] of src/config/config.toml set title and logoText to
"[NAME]", write a short tagline and description for my business ([WHAT WE DO, WHERE]), and set
baseUrl to "[URL]". [I put my logo at src/assets/images/[FILE].svg: set logo to
"/images/[FILE].svg", logoText to "", and logoWidth / logoHeight for a 28px-tall logo.] Set
[site.favicon] image to "/images/[SQUARE FILE]". Then tell me which npm commands to run.

Site Identity & Logo