Site Identity & Logo

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

Name, Description, And Address

[site]
  title            = "Ecozen"
  description      = ""
  tagline          = ""
  taglineSeparator = ""      # empty uses " - "
  baseUrl          = "https://example.com"   # placeholder: set your own address

title is your business name. It is also the large wordmark at the bottom of the footer and the business name in the structured data.
description is the default text under your link in search results and social previews. Pages with their own description or metaDescription use theirs. Empty uses seo.siteDescription in each src/i18n/<lang>.json. A value here is used for every language.
tagline is added to every page title: “Pricing - your tagline”. Empty uses seo.tagline in each src/i18n/<lang>.json, so change it there. A value here is used for every language. 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, the RSS feed, llms.txt, structured data, 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

Ecozen uses two logo files, because the logo sits on both light and dark backgrounds:

[site]
  logo          = "/images/logo.svg"          # src/assets/images/logo.svg
  logoAlternate = "/images/logo-footer.svg"   # src/assets/images/logo-footer.svg
  logoText      = ""
  logoWidth     = "132px"
  logoHeight    = "32px"

Key	Where it shows
`logo`	The header on every page, once it has a solid background
`logoAlternate`	The dark footer layouts, and the `transparent` header over the photo on the homepage and `/services/`

Put your files in src/assets/images/ and point the keys at them with a path that starts with /images/. SVG is best; PNG works too. Set logoWidth and logoHeight to the header size you want, keeping your logo’s proportions. On phones the logo is drawn a little narrower.

logoText adds text beside the image, for a logo mark without a name. Leave it empty when the name is part of the file.

Favicons

The small icon in the browser tab. Ecozen 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.png"

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 (cropped to 1200×630), or
the shared image in [opengraph] image.

[opengraph]
  image = "/images/og-image.jpg"   # public/images/og-image.jpg

The shipped public/images/og-image.jpg shows the Ecozen demo, so replace it with a 1200×630 image of your own. More in SEO & AI Visibility.

Do It With AI

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

Site Identity & Logo