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 static/img/ 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
.