Site Identity & Logo

Files: src/config/config.toml, src/i18n/<language>.json, 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, the small icon in the browser tab, and the card people see when they share a link.

Name, Tagline, And Address

[site]
  title            = "Margo"
  description      = "Editorial portfolio theme for designers, studios, and photographers, ..."
  tagline          = "Creative Portfolio Astro & Tailwind CSS Theme"
  taglineSeparator = ""   # default is " - "
  baseUrl          = "https://example.com"   # PLACEHOLDER: set your own domain before deploying

title is your name or your studio’s name. It is the {brand} in the footer copyright, the site name in social previews and structured data, and the RSS feed title. To choose the home page’s browser title, set metaTitle in src/content/homepage/english/-index.md (and each other language folder); the tagline is added after it.
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: “About - your tagline”. Keep it under about 55 characters. Set disableTagline: true in a page’s frontmatter to drop it on that page. The generated social card of the homepage uses it as its heading.
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).

Per language. Each language file in src/i18n/ has a site block. A value there wins over config.toml for that language:

"site": {
  "tagline": "Thème portfolio créatif pour Astro et Tailwind CSS",
  "description": "Thème portfolio éditorial pour designers, studios et photographes, ..."
}

English ships with both empty, so English uses config.toml. French and Arabic ship with their own, so change src/i18n/fr.json and src/i18n/ar.json too, or empty their values to use the English ones from config.toml.

author and keywords in [seo] are part of your identity too. author ships as "Getastrothemes": put your own name or studio there. [seo.identity] tells search engines whether the site belongs to a studio (Organization) or to one person (Person). See SEO & AI Visibility.

The Logo

Margo’s header logo is your name in text, set in the theme font (Hanken Grotesk, weight 600):

[site]
  logo       = ""        # Path to a logo image (svg, png). Empty shows `logoText` as a text wordmark
  logoText   = "Margo"   # Wordmark text. With a `logo` image it shows next to it
  logoWidth  = "24px"    # Only when `logo` is set
  logoHeight = "36px"    # Only when `logo` is set

Change only the name. Set logoText to your name, written the way you want it shown. Check the header at phone width afterwards: a long name has less room next to the menu button.

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

[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 = "32px"

Set logoWidth and logoHeight to keep your logo’s proportions. Keep logoText to show your name next to a small mark, or empty it when the name is part of the file.

The built-in mark. A rounded square with a serif “M” is drawn from src/lib/brandMark.ts. The site doesn’t show it in the header: the generated social cards use it while logo is empty, and src/assets/images/logo.svg and favicon.svg are copies of it. When you set logo, the social cards use your file instead. Edit brandMark.ts only if you are comfortable with SVG paths.

Favicons

The small icon in the browser tab and on phone home screens. Margo 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 Margo 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.
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, your site’s address, the section name and page title as a two-line heading, and the description, in your fonts and colors. The homepage card uses the tagline as its heading.
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 Margo 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 you, not the theme, and site.tagline and site.description in src/i18n/fr.json and src/i18n/ar.json are yours or empty.
author in [seo] is your name or studio.
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 (under 55 characters) and description for my work ([WHAT I DO,
WHERE]), and set baseUrl to "[URL]". Set author in [seo] to "[NAME]". Translate the tagline and
description into site.tagline and site.description of src/i18n/fr.json and src/i18n/ar.json.
[I put my logo at src/assets/images/[FILE].svg: set logo to "/images/[FILE].svg", logoText to "",
and logoWidth / logoHeight to keep its proportions.] Set [site.favicon] image to
"/images/[SQUARE FILE]". Then tell me which npm commands to run.

Site Identity & Logo