Skip to content
duxt

Brand your site

Set the name, the wordmark and the icons, so the site reads as yours rather than as the layer's.

The layer ships unbranded on purpose: no name, no mark, no icons. A site that extended it and showed duxt's identity would be advertising somebody else's project, so every one of these is yours to set — and until you do, the header falls back to a generic book icon.

Steps

  1. The name. title is the word in the navbar, the SEO title template, the 404, the RSS channel and the llms.txt heading. One value, seven readers.
    export default defineAppConfig({
  duxt: {
    title: 'Acme SDK'
  }
});

    Same in every language, so a plain string is right. Where it is not, the record form works here as it does anywhere else — see Several languages.
  2. The wordmark, if you have one. logo.src replaces the icon-and-name pair with an image. srcDark is swapped in by CSS under the dark class, not by script — a scripted choice renders the light mark into the server HTML and flips it after hydration, which is a visible blink.
    logo: {
  src: '/wordmark.svg',
  srcDark: '/wordmark-dark.svg',
  alt: 'Acme SDK'
}

    alt falls back to title, so set it only where the mark says something the name does not.
  1. The browser icons. These are not duxt config — they are ordinary Nuxt head entries, because a favicon is a site's, never a theme's.
app: {
  head: {
    link: [
      { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
      { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }
    ]
  }
}

An SVG icon can carry its own prefers-color-scheme rule, so one file covers a light and a dark tab strip. The PNG (180×180) exists only because iOS ignores SVG icons.

  1. The attribution line, if you want it gone. The footer carries a "Powered by duxt" line with the layer's version. poweredBy: false drops it — a layer that cannot be told to stop naming itself is adware.

What stays the layer's

Colours, spacing and components are a separate question, and a separate page: Override the theme. Identity is what this page covers — the name and the mark. The two are worth keeping apart, because a brand colour usually turns out to be one token, not a fork of the theme.

Checklist

  • title is set, and nothing in the header still reads "Documentation"
  • logo.srcDark is set, or the mark is legible on both backgrounds
  • The favicon and the apple-touch-icon resolve — both are served from public/
  • llms.txt and rss.xml name your site, not a placeholder
  • poweredBy is a deliberate choice rather than a default nobody looked at
Was this page helpful?