Logo & favicon

Upload your logo and favicon, and configure how they appear in the sidebar and browser tab.

Your logo appears in the top-left of the sidebar on every page. The favicon appears in the browser tab and bookmarks. Both are configured in Project Settings → Branding → Identity.

Screenshot needed

screenshot of the Identity section showing logo and favicon upload fields with previews

Upload a logo as PNG, SVG, or WebP. SVG is preferred — it scales crisply on retina displays and supports separate light/dark variants.

Light and dark variants#

If your logo doesn't read well on both light and dark backgrounds (most don't), upload separate variants:

  • Logo (light mode) — used when the reader is on light theme.
  • Logo (dark mode) — used when the reader is on dark theme.

Dokly swaps them automatically based on the reader's current theme.

Logos are rendered at ~120px wide in the sidebar. Upload at 2× (240px wide) for retina sharpness. Anything larger is downscaled.

If your logo is wider than tall (most are), it'll fit naturally. If it's taller than wide (e.g., a stacked logomark + text), the sidebar will look unbalanced — consider using just the mark in the sidebar.

The sidebar logo links to your project's homepage by default (the index page or first published page). On Pro plans, you can override this in Settings → Identity → Logo URL — useful if you want the logo to link back to your marketing site instead.

Favicon#

Upload a square PNG, ICO, or SVG. The favicon is shown in:

  • The browser tab
  • Bookmarks
  • The "Add to home screen" icon on mobile
  • Search results (where the search engine chooses to show one)

512×512 PNG is the safe choice. Dokly generates the variants browsers actually use (16×16, 32×32, 192×192, 512×512, Apple Touch Icon).

If you upload SVG, make sure it has a defined viewBox and renders well at 16×16 — favicons are tiny.

The favicon is not automatically derived from your logo. Browsers render favicons at 16px — your full logo will be illegible at that size. Use just the mark, or a simplified version. If you don't have a separate favicon, Dokly uses the first letter of your project name in your primary color as a fallback.

When to leave the defaults#

If you're documenting an internal tool or an early-stage project, the default Dokly logo and favicon are fine. They're branded as Dokly, but they don't shout — you can ship a usable docs site without ever uploading anything.

For anything customer-facing, upload both. The favicon especially: a default favicon in a customer's bookmark bar looks unfinished.

Where next#