Voyager gives you four logo-related controls — a default logo, a light variant for dark backgrounds, a desktop width, and a favicon. Together they cover every surface where your brand mark appears: the header, the page-transition curtain, the intro loader, and the browser tab. All four live in Theme settings → Logo.Documentation Index
Fetch the complete documentation index at: https://voyage-theme.fasil.in/llms.txt
Use this file to discover all available pages before exploring further.
The two logo slots
Voyager uses two logo files instead of one, because the header sits over different backgrounds across the storefront.| Slot | Where it appears | What to upload |
|---|---|---|
| Logo (default / navy variant) | Header on every page after the hero, footer, page-transition curtain logo when present | Your dark-ink logo — navy, black, or whatever your primary brand color is |
| Logo (light variant for dark backgrounds) | Header overlaid on the home-page hero (transparent nav state), dark-background sections, the intro loader on dark theme | A white or paper-cream version of the same wordmark |
Logo width
Logo width (desktop) is a range slider from60 px to 320 px in 10 px steps. Default is 140 px.
The width applies to the desktop header. On mobile, the logo scales down proportionally to fit the centred wordmark slot. There is no separate mobile-width control — Voyager scales the desktop value so your proportions stay consistent.
| Width | Best for |
|---|---|
100 px | Long wordmarks (multi-syllable names with serif letterforms) |
140 px (default) | Short-to-medium wordmarks, the standard editorial proportion |
200 px | Custom monograms or stacked marks that need more breathing room |
280–320 px | Maison-style cresting wordmarks designed to anchor the page |
File formats
- SVG (recommended)
- PNG
Use SVG when your logo is type-based or a clean vector mark. SVG renders crisp at any size, scales perfectly on retina displays, and weighs a few kilobytes.
- Export with text converted to outlines (paths)
- Use
currentColorif your file is single-colour and you want it to inherit the surrounding text colour - Strip embedded metadata (Illustrator, Figma export options)
Recommended dimensions
| Asset | Format | Ideal upload size |
|---|---|---|
| Default / navy logo | SVG | Native (any size) |
| Default / navy logo | PNG | 480 × 120 (or 2× your max desktop width) |
| Light variant | SVG | Native (any size) |
| Light variant | PNG | 480 × 120 |
| Favicon | SVG | 32 × 32 square |
| Favicon | PNG | 32 × 32 or 64 × 64 square |
Favicon
Upload a square image to Favicon. Voyager crops it to a32 × 32 square for the browser tab — anything non-square will be centre-cropped, so design accordingly.
For best results, supply either:
- A monogram or single-letter mark of your brand (works at small sizes where full wordmarks turn to mush), or
- An icon-only version of your logo with generous padding inside the square
What’s next
Colors
Brand palette, the four schemes, and dark-mode behaviour.
Typography
Body, heading, and accent fonts — and the script-fallback caveat.