--- title: Branding description: "Configure logos, favicons, navbar links, and footer content for your docs site. Supports light/dark mode variants, custom colors, and external link icons." --- > **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version. {/* ANCHOR STABILITY: The "Favicon", "Site Name", "Description", and "Logo" heading anchors on this page are baked into suggestion links stored in Firestore build records (builder/build-service/lib/config-suggestions.ts and its CLI twin). Renaming these headings dead-links every previously stored suggestion — don't rename without updating both twins and accepting stale links in historical builds. */} Branding controls the visuals readers see first: logos, favicons, and navigation links. Everything supports light/dark mode variants. ## Logo Add your logo to the navigation header: ```json { "logo": { "light": "/images/logo-light.webp", "dark": "/images/logo-dark.webp", "href": "https://yourcompany.com" } } ``` | Field | Description | |-------|-------------| | `light` | Logo for light mode (dark logo on light background) | | `dark` | Logo for dark mode (light logo on dark background) | | `href` | Where clicking the logo navigates | Use SVG logos for crisp rendering at any size. If you only have one logo, use it for both `light` and `dark`. ### Logo Dimensions Logos are displayed at 120px width maximum. For best results: - Width: 120-240px - Height: 30-40px - Format: SVG preferred ## Favicon One image for both modes: ```json { "favicon": "/images/favicon.svg" } ``` Or a separate variant for each mode: ```json { "favicon": { "light": "/images/favicon.svg", "dark": "/images/favicon-dark.svg" } } ``` The `light` favicon is shown in light mode; `dark` is shown in dark mode. `dark` is optional — when omitted, `light` is used in both modes. Jamdesk emits a `` for the primary favicon plus a second link with `media="(prefers-color-scheme: dark)"` for the dark variant. Supported formats: SVG, PNG, ICO. If you prefer a single asset, an SVG that uses `currentColor` for its strokes and fills also adapts automatically — the browser substitutes the active foreground color. ## Site Name The `name` field appears in browser tabs and search results: ```json { "name": "Acme Docs", "description": "Documentation for the Acme API" } ``` Pair it with a [`description`](#description) so search results and link previews show real copy instead of a generic fallback. ## Description The `description` field is your site's default SEO summary. Search engines show it under your site title, and social platforms use it for link previews: ```json { "description": "Build, ship, and scale documentation with the Acme platform." } ``` Aim for 50–160 characters written for a reader deciding whether to click. Pages that set their own `description` frontmatter use that instead — the site description covers everything else. ## Navigation Links Add links to your navbar: ```json { "navbar": { "links": [ { "label": "Blog", "href": "https://yourcompany.com/blog" }, { "label": "Pricing", "href": "https://yourcompany.com/pricing" } ], "primary": { "type": "button", "label": "Get Started", "href": "https://app.yourcompany.com/signup" } } } ``` ### Link Options | Field | Type | Description | |-------|------|-------------| | `label` | string | Display text | | `href` | string | URL (external or internal) | ### Primary Button The `primary` field creates a highlighted call-to-action button: ```json { "primary": { "type": "button", "label": "Dashboard", "href": "https://app.yourcompany.com" } } ``` ## Footer Add social links and custom link columns to your documentation footer. ### Social Links Display social media icons at the bottom of every page: ```json { "footer": { "socials": { "github": "https://github.com/yourcompany", "x": "https://x.com/yourcompany", "discord": "https://discord.gg/yourserver", "linkedin": "https://linkedin.com/company/yourcompany" } } } ``` #### Supported Platforms | Platform | Key | Description | |----------|-----|-------------| | GitHub | `github` | Link to your GitHub organization or repo | | X (Twitter) | `x` or `twitter` | Link to your X/Twitter profile | | LinkedIn | `linkedin` | Link to your company LinkedIn page | | Discord | `discord` | Link to your Discord server | | Slack | `slack` | Link to your Slack community | | YouTube | `youtube` | Link to your YouTube channel | | Instagram | `instagram` | Link to your Instagram profile | | Facebook | `facebook` | Link to your Facebook page | | Reddit | `reddit` | Link to your subreddit | | Telegram | `telegram` | Link to your Telegram channel | | Bluesky | `bluesky` | Link to your Bluesky profile | | Threads | `threads` | Link to your Threads profile | | Medium | `medium` | Link to your Medium publication | | Hacker News | `hacker-news` | Link to your Hacker News profile | | Website | `website` | Link to your main website | Icons display in a consistent order regardless of how you define them in your config. GitHub and X/Twitter appear first, followed by other platforms. ### Link Columns Add organized link groups above your social icons: ```json { "footer": { "links": [ { "header": "Resources", "items": [ { "label": "Blog", "href": "https://yourcompany.com/blog" }, { "label": "Changelog", "href": "/changelog" } ] }, { "header": "Company", "items": [ { "label": "About", "href": "https://yourcompany.com/about" }, { "label": "Careers", "href": "https://yourcompany.com/careers" } ] } ], "socials": { "github": "https://github.com/yourcompany", "x": "https://x.com/yourcompany" } } } ``` | Field | Type | Description | |-------|------|-------------| | `links` | array | Array of link column objects | | `links[].header` | string | Column heading (optional) | | `links[].items` | array | Links in the column | | `links[].items[].label` | string | Display text for the link | | `links[].items[].href` | string | URL (internal paths or external URLs) | External links (starting with `http`) open in a new tab automatically. Internal links navigate within your docs. ### Hide Footer on Specific Pages Use frontmatter to hide the footer on individual pages: ```yaml --- title: Landing Page hideFooter: true --- ``` This is useful for custom landing pages or pages where the footer would be distracting. ## Jamdesk Branding By default, a "Powered by Jamdesk" link appears in the footer of your documentation pages. This helps spread the word about Jamdesk while keeping your docs looking professional. ### Hiding the Branding To remove the Jamdesk branding: 1. Go to **Settings** in your Jamdesk dashboard 2. Find the **Build Settings** section 3. Toggle off **Show Jamdesk Branding** 4. Trigger a new build The branding toggle is available on all plans. Changes require a rebuild to take effect. ## Full Branding Example Here's a complete branding configuration: ```json { "name": "Acme Documentation", "description": "Build amazing products with Acme", "theme": "jam", "colors": { "primary": "#6366F1", "light": "#818CF8", "dark": "#4F46E5" }, "favicon": "/images/favicon.svg", "logo": { "light": "/images/logo-dark.webp", "dark": "/images/logo-light.webp", "href": "https://acme.com" }, "navbar": { "links": [ { "label": "API", "href": "/api/overview" }, { "label": "Blog", "href": "https://acme.com/blog" } ], "primary": { "type": "button", "label": "Sign Up", "href": "https://app.acme.com/signup" } }, "footer": { "socials": { "github": "https://github.com/acme", "x": "https://x.com/acme", "discord": "https://discord.gg/acme" }, "links": [ { "header": "Resources", "items": [ { "label": "Blog", "href": "https://acme.com/blog" }, { "label": "Status", "href": "https://status.acme.com" } ] } ] } } ``` ## Custom Domain Add your domain in the Jamdesk dashboard: 1. Go to **Settings** → **Domains** 2. Add your domain (e.g., `docs.yourcompany.com`) 3. Configure DNS as shown 4. Wait for verification Your docs will be accessible at your custom domain with automatic SSL. ## What's Next? Customize colors and typography Improve search metadata and previews