Docs Favicon: The Outlined Variant Explained
A docs favicon is the same site icon as your main app wrapped in a coloured border, served on a documentation subdomain (such as docs.yoursite.com). Because docs and app usually share one logo, their tabs look identical; the outline keeps the brand mark intact while making the documentation tab distinguishable at a glance. The files are typically prefixed docs- and paired with their own web app manifest.
Why a separate docs favicon
Documentation almost always lives on its own subdomain but shares the company's single logo, so the docs tab and the app tab carry the same 16-pixel mark. A reader with the product and several guide pages open cannot tell them apart without reading the tab titles. A docs favicon solves this by adding a coloured ring around the existing icon: the interior mark is unchanged, so brand recognition holds, while the frame signals "this is the documentation".
It is a different axis from environment variants (production vs staging vs dev). Docs is the same environment — production — but a different surface, so the icon is framed rather than tinted or badged.
How the border is coloured
| Mode | Result |
|---|---|
| Accent | A hue taken from the artwork itself, so the ring feels on-brand. |
| Contrast | Black or white, whichever reads best against the mark — the most legible default at tab size. |
| White / custom | A plain white frame, or a specific #rrggbb to match a docs design system. |
Docs favicon FAQ
How is a docs favicon different from an environment favicon?
An environment favicon answers 'which deployment is this?' by tinting or badging staging and dev. A docs favicon answers 'which surface is this?' by framing the same production icon. They are independent and can be used together.
What files make up a docs favicon set?
An outlined copy of each tab icon prefixed docs- (docs-favicon.ico, docs-favicon-32x32.png, docs-apple-touch-icon.png, and so on) plus a docs-manifest.json, served from the documentation host or switched in by hostname.