How to Add a Docs Favicon in Mintlify, Docusaurus, GitBook & More
Once you've decided your docs deserve their own favicon, the only question left is where your docs platform keeps that setting. Most of them hide it in a slightly different place. Here are the recipes for the platforms teams actually ship documentation on — generate the outlined docs-* set once, then wire it up wherever your docs live.
One set of icons, many config files
The artwork is the same everywhere: an outlined copy of your app mark, exported as the usual favicon.ico plus the PNG sizes, apple-touch-icon, and a manifest. What differs per platform is only how you tell it to use them. Generate the docs set once, drop the files into the platform's static/public directory, and then apply the relevant snippet below.
Where each platform keeps the favicon
| Platform | Where it lives |
|---|---|
| Mintlify | The "favicon" field in docs.json / mint.json, pointed at a file in your docs repo. |
| Docusaurus | themeConfig-adjacent config.favicon in docusaurus.config.js, plus static/ for the file. |
| GitBook | Space settings → Customization → Favicon (upload in the dashboard). |
| Nextra | The <Head> in theme.config or your _app, using standard <link rel> tags. |
| ReadMe | Project dashboard → Appearance → Favicon upload. |
| Static / custom | Plain <link rel> tags in the docs template <head>. |
Mintlify (docs.json)
{
"name": "Acme Docs",
"favicon": "/docs-favicon.png",
"logo": { "light": "/logo.svg", "dark": "/logo-dark.svg" }
}Mintlify derives the tab icon from the single favicon field. Point it at your outlined docs-favicon.png and commit the file alongside.
Docusaurus (docusaurus.config.js)
module.exports = {
title: "Acme Docs",
favicon: "img/docs-favicon.ico", // relative to static/
themeConfig: {
// ...
},
};Put docs-favicon.ico under static/img/. Docusaurus emits the <link> tag for you at build time.
Nextra / static docs (<head> tags)
<link rel="icon" href="/docs-favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="/docs-favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/docs-favicon-16x16.png" />
<link rel="apple-touch-icon" href="/docs-apple-touch-icon.png" />
<link rel="manifest" href="/docs-manifest.json" />For Nextra, drop these into the theme config's <Head>. For any hand-rolled docs template, they go straight in the <head>.
The universal recipe
- 1
Generate the outlined docs set
Produce a docs-* icon set from your app mark with an outline applied — full favicon.ico, PNG sizes, apple-touch-icon, and a docs-manifest.json named "Docs".
- 2
Drop the files in the docs static dir
Commit them to whatever public/static folder your platform serves assets from (static/ for Docusaurus, the repo root or public/ for most others).
- 3
Point the platform's favicon setting at them
Use the field or upload above. For dashboard-based platforms (GitBook, ReadMe) upload the 32×32 or .ico; for config-based ones, set the path.
- 4
Hard-refresh and confirm
Favicons cache aggressively. Open the docs in a fresh profile or with cache disabled and confirm the outlined icon shows next to the app's plain one.
Docs platform favicon FAQ
My docs platform only takes one favicon image — is that enough?
For the browser tab and search result, yes — a single sharp square PNG covers the common cases. You lose apple-touch-icon and manifest niceties, but the core differentiation (a distinct docs tab icon) still works. Give it the highest-quality square you have.
Do I need a different manifest for the docs site?
Only if people install your docs as a PWA. A docs-manifest.json named "Docs" makes an installed docs app show up distinctly in the launcher. If you don't offer that, the icon links alone are enough.
The old app favicon still shows after I changed it — why?
Favicon caching. Browsers hold onto the previous icon hard. Test in a fresh browser profile, or append a ?v=2 query to the icon URL to force a re-fetch.