Site Identity & Logo

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

Name, Tagline, And Description

[site]
  title            = "Acme Tasks"
  description      = "Plan projects and ship work together in one calm workspace."
  tagline          = "Task management for remote teams"
  taglineSeparator = ""   # empty uses " - "

[seo]
  author   = "Acme Inc."
  keywords = ["task management", "team collaboration"]

title is the brand name: structured data, the {brand} placeholder in the copyright line, and the alt text of a custom logo use it.
tagline is added to the end of every page title in the browser tab and in search results (“Pricing - Task management for remote teams”). A page turns it off with disableTagline: true in its frontmatter.
The tagline can be translated: set "tagline" under "site" in src/i18n/en.json and src/i18n/fr.json. A value there wins over config.toml for that language.
description is the default meta description and social preview text for pages that don’t set their own.

Use Your Own Logo

With logo = "", Taskly draws its built-in mark (a white check on a lilac primary tile with a lime dot), so it follows your brand color. To use your own image:

Put the file in src/assets/images/, for example src/assets/images/my-logo.svg. SVG gives the sharpest result; PNG and WebP work too.

Point config.toml at it. Paths that start with /images/ are read from src/assets/images/:

[site]
  logo       = "/images/my-logo.svg"
  logoDark   = ""             # optional: a light version for the dark footer
  logoText   = "Acme Tasks"   # "" when the image already contains the name
  logoWidth  = "32px"
  logoHeight = "32px"

Check the header and the footers. The default footer of inner pages is dark: the built-in mark and logoText turn white there on their own, but an image is shown as it is. The newsletter and tiles footers are light and show logo; the wordmark footer on / prints logoText (or the site title when it is empty) as large text instead of a logo. If your logo is dark, add a light version (for example a white SVG) to src/assets/images/ and set it as logoDark:
```
[site]
  logo     = "/images/my-logo.svg"
  logoDark = "/images/my-logo-white.svg"   # used in the dark footer; empty uses `logo` there too
```
logoDark uses the same size (logoWidth, logoHeight) and only replaces a custom logo; the built-in mark needs neither.

src/assets/images/logo.svg is a copy of the built-in mark you can use as a starting point.

Favicons

Put a square image (SVG or a PNG of at least 512×512) in src/assets/images/, and set it in config.toml:

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

Run:
Terminal window
```
npm run generate-favicons
```
It writes every size (favicon.ico, favicon.svg, Apple touch icon, web app icons, and site.webmanifest) to public/images/favicons/.

When a page is shared in a chat app or on social media, the preview shows an image:

Pages with an image in their frontmatter use that image.
Other pages get a card drawn during npm run build with the logo, the section, the page title, and the description ([opengraph] generateImages = true).
[opengraph] image (/images/og-image.jpg, in public/) is the shared fallback. Redraw it from your logo, colors, fonts, tagline, and description with:
Terminal window
```
npm run generate-og-image
```
Run it after you change the brand, baseUrl, colors, or fonts. [opengraph] theme (light or dark) picks the palette for both the cards and this image.

Contact Details

The contact page shows its emails, booking slots, and support chat from its own section files (contact-cards-section.md and contact-message-section.md), so edit those for your real details. config.toml has no site-wide contact block.

Do It With AI

Rebrand the site identity to [NAME], tagline "[TAGLINE]", description "[DESCRIPTION]". Edit [site]
and [seo] in src/config/config.toml, and "tagline" under "site" in src/i18n/en.json and fr.json
(translate it for French). My logo is src/assets/images/[FILE]; set logo, logoText, logoWidth, and
logoHeight, set logoDark to [LIGHT FILE] (a light version for the dark footer) or leave it empty,
and set [site.favicon] image. Then tell me which commands to run for the favicons and the social
image.

Site Identity & Logo