Out of the box, Astro Rocket builds a logo for you — a tidy square badge with the first letter of your site name, tinted in your brand colour. It’s a great placeholder, but it’s your site. This guide walks through making the logo and the name your own: rename the site, drop in your own logo image, and decide whether the name shows next to it. Most of it is a single line of config.
What you get by default
Before changing anything, it helps to know what’s already happening. The logo is the Logo component — a monogram badge: the first letter of siteConfig.name, in white, on your active brand colour. No image file, no design tool. It appears in the header and footer, and it re-tints live when you switch colour themes.
That means two things:
- If you only set your site name, you instantly get a matching letter badge — done.
- If you have a real logo, you can replace the badge with your image — everywhere at once.
Let’s do both.
Step 1 — Set your site name
Open src/config/site.config.ts and set name:
// src/config/site.config.ts
name: 'Acme Studio',The name isn’t cosmetic — it’s the single source of truth for your brand text. Changing it updates:
| Where | What uses name |
|---|---|
| Header & footer | The wordmark text beside the logo |
| Logo badge | The monogram letter (first character of the name) |
| Browser tab title | Page <title> and the auto-generated favicon letter |
| Sharing | Open Graph / Twitter card titles |
| SEO | WebSite and Organization structured data |
Set it accurately once and the whole site follows.
Step 2 — Use your own logo image
When you’re ready to replace the letter badge with a real logo, add one field — branding.logo.image:
// src/config/site.config.ts
branding: {
logo: {
alt: 'Acme Studio',
image: '/logo.svg', // 👈 a file you put in public/
},
}Two small steps:
- Drop your logo file into the
public/folder (e.g.public/logo.svg). - Point
branding.logo.imageat it with a leading slash (/logo.svg).
That’s it. The image now replaces the monogram everywhere the logo appears — the header, the footer, and any other spot that renders <Logo> — with no layout edits. Leave image unset (or commented out) and you keep the auto monogram.
A few tips for a crisp result
- SVG is best. It stays razor-sharp at every size and in both light and dark mode. PNG works too — export it at 2× the display size (≈64px tall) so it looks clean on retina screens.
- Any shape is fine. The logo is sized by height, with width left automatic — so a square icon mark and a wide wordmark logo both render correctly without being squished.
- Transparent backgrounds just work. Your logo sits directly on the header/footer, not inside a coloured square, so a transparent PNG or SVG looks the way you designed it.
- Author avatars are untouched. Blog bylines keep their per-author initials even after you set a brand image — only the site logo changes.
Logo and name, or just the logo?
By default the header and footer show your logo image plus your site name next to it:
[ logo ] Acme Studio
That’s perfect when your logo is an icon mark (a symbol without text). But if your logo is a full wordmark — it already spells out your name — the text beside it becomes redundant, and you’ll want the logo only.
For a logo-only header, use the header’s logo slot, which replaces the whole logo area (image and name) with exactly what you provide. Open the layout for the pages you want — the landing page lives in src/layouts/LandingLayout.astro — and place your image inside <Header>:
<Header slot="header" shape="floating" variant="transparent" position="fixed">
<a slot="logo" href="/">
<img src="/logo.svg" alt="Acme Studio" height="32" />
</a>
</Header>One thing to watch — and the single most common mistake: keep your page <slot /> and <Footer> outside the <Header> tag. The <Header> should close right after your logo. If the closing </Header> accidentally wraps the rest of the page, everything below the navbar disappears (the header has no catch-all slot, so stray content is dropped). So the shape you want is:
<Header slot="header" /* …props… */>
<a slot="logo" href="/">
<img src="/logo.svg" alt="Acme Studio" height="32" />
</a>
</Header> <!-- ✅ closes here, right after the logo -->
<slot />
<Footer slot="footer" />Want the same logo-only treatment on blog posts and inner pages? Repeat the slot in src/layouts/BlogLayout.astro and src/layouts/PageLayout.astro.
Don’t forget the browser tab
Your logo handles the on-page brand mark; the favicon is the little icon in the browser tab, and it’s set separately. Like the logo, it’s auto-generated from your site name by default. To use your own, point branding.favicon.svg at a file in public/:
// src/config/site.config.ts
branding: {
favicon: {
svg: '/favicon.svg',
},
}There’s also branding.logo.imageUrl — that one is purely for search-engine structured data (Google rich results), not the visible logo, so it’s fine to leave it pointing at a simple square PNG. For the full rundown of every branding field, see the configuration guide.
A note on light and dark mode
The floating homepage header sits over a dark hero, while the solid header and footer follow your light/dark theme. A single-colour logo can disappear on one of them. Two easy fixes:
- Use an SVG whose marks use
currentColor, or - Use a logo with its own contained background (a transparent-padded mark that reads on both light and dark).
If in doubt, preview your site in both modes with the theme toggle in the header before you ship.
Recap
| Goal | Where | Set |
|---|---|---|
| Rename the site | src/config/site.config.ts | name: 'Acme Studio' |
| Use a custom logo image | src/config/site.config.ts | branding.logo.image: '/logo.svg' |
| Keep the auto monogram | src/config/site.config.ts | leave branding.logo.image unset |
| Logo only (no site name) | src/layouts/*.astro | <Header> logo slot |
| Custom favicon (browser tab) | src/config/site.config.ts | branding.favicon.svg: '/favicon.svg' |
Two lines of config get you a fully branded header and footer — your name, your logo, your colours. If Astro Rocket saved you time, a star on GitHub helps other people find it.