# Site Identity & Logo ## Site Identity & Logo **Files:** `src/config/config.toml`, `src/i18n/.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 ```toml # src/config/config.toml [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: ```json // src/i18n/fr.json "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](/margo/customization/seo-ai-visibility/). ### The Logo Margo's header logo is your name in text, set in the theme font (Hanken Grotesk, weight 600): ```toml [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/`: ```toml [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: 1. 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. 2. Point `[site.favicon] image` at it. The path starts with `/images/` and is read from `src/assets/`: ```toml [site.favicon] path = "/images/favicons" # favicon images path (No need to change it) image = "/images/favicon.svg" # src/assets/images/favicon.svg ``` 3. With `npm run dev` running (it applies your `config.toml` change), run: ```bash 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. ### Social Preview Images When someone shares a link to your site, the preview card is, in this order: 1. **The page's own `image`**, if its frontmatter has one. 2. **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. 3. **The shared image** in `[opengraph] image`, when cards are off. ```toml [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: ```bash 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. More in [SEO & AI Visibility](/margo/customization/seo-ai-visibility/). ### 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 ```text 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. ```