Logo and favicon
Logo
Shown in the top-left of every docs page, links to your homepage.
Set it from project settings → Branding → Logo, or in the editor by dragging an image into the chat and asking the agent to use it as the logo.
Recommended specs:
- SVG preferred (crisp at any size, smallest file)
- PNG or WebP if SVG isn't possible, at least 2x the display size for retina
- Aspect ratio: roughly 1.5:1 to 4:1 (landscape) renders cleanest in the navbar
- Transparent background
Dark mode: if your logo doesn't work on a dark background, upload a separate dark-mode variant in branding settings. Docsio swaps automatically based on the visitor's color preference.
Favicon
The small icon in the browser tab.
Set it from project settings → Branding → Favicon.
Recommended specs:
- ICO (multi-size) or PNG at 512×512 px
- SVG also supported (modern browsers only)
- Square, non-square favicons get letterboxed
Apple touch icon: if your favicon is square at 512×512, Docsio also serves it as the Apple touch icon (used when someone adds your docs site to their home screen).
Asking the agent
The fastest path: drop the image into the chat.
"Use this as the logo.", drag and drop the file into the agent's chat box.
The agent uploads it, places it in your project's public/img/ for Fumadocs (static/img/ on older Docusaurus sites) folder, and updates the site config to use it.
Common patterns
- Wordmark vs. mark. Wordmark logos (text-based) work best in the navbar. Pure marks (icon only) work too but consider pairing with the project name.
- Same logo as your main site. Just point Docsio at the same URL: "Use my logo from acme.com/logo.svg."
- Upload, then reference. Upload via settings, then reference from any page using
.