Favicon ToolsПроверитьСоздать
DevEx
Brand

Docs vs App: Why They Should Never Share a Favicon

· 6 min read

Almost every product ships its docs on a subdomain and hands it the same favicon as the app, because it is the same company and the same logo. That instinct is right about brand and wrong about usability. Docs and app are different surfaces — different jobs, different sessions, different tabs open at the same time — and a single shared icon pretends they're the same thing.

A favicon is a namespace, not just a logo

It is tempting to think of the favicon as a shrunk-down logo — brand decoration for the tab. In practice it does a second job that has nothing to do with branding: it is the only per-tab label a user can read at a glance. Tab titles truncate to a few characters, they change as the user navigates, and a row of them looks like a paragraph. The icon is the fixed, readable handle.

That makes the favicon a namespace. When two surfaces share one icon, you have collapsed two namespaces into one, and the user has to fall back to reading truncated titles to tell them apart. When a developer has your dashboard, your API reference, and three guide pages open — which is the normal state of someone actually using your product — every one of those tabs shows the identical mark.

What sharing costs, what splitting buys

One favicon for both

Docs and app look identical

  • Every docs and app tab is the same mark; titles are the only signal.
  • "Where's the API reference?" becomes a hunt through 8 identical tabs.
  • Support answers the same "which tab was that on" question repeatedly.
  • Screenshots in tickets and threads are ambiguous about which surface.

A distinct docs favicon

Same brand, obviously different surface

  • Docs tabs are catchable at a glance without reading any text.
  • Switching from a guide back to the app is a single saccade, not a scan.
  • The mark is still yours — an outline or badge, not a new logo.
  • Shared screenshots self-label: the icon says app or docs.

The people this actually hurts

The reader you're optimising for is not the marketing visitor who lands on one docs page from Google and leaves. It's the developer integrating your product, who lives with the app and the docs open together for hours. They alt-tab between "how does this endpoint work" and "let me try it in the dashboard" dozens of times a session. Every one of those switches is a tiny visual search when the tabs are identical, and a reflex when they aren't.

It also hurts your own team. Support engineers, solutions people, and anyone triaging with the customer's product open in a dozen tabs pay the same tax. The favicon is cheap to fix and the cost is paid on every single tab switch, forever.

Docs is one of several surfaces you already run

SurfaceTypical hostWhy it wants its own icon
App / dashboardapp.yoursite.comThe canonical mark. Keep it clean — everything else varies from this baseline.
Documentationdocs.yoursite.comOpen alongside the app for hours at a time. The highest-value one to differentiate.
Status pagestatus.yoursite.comYou open it during an incident, when scanning fast matters most.
Blog / marketingwww.yoursite.comOften a separate CMS; easy to leave on a default or stale icon.
Admin / internaladmin.yoursite.comYou never want to confuse the admin tab with the customer-facing app tab.

Same mark, different frame — not a different logo

The fix is not a separate docs logo. A new mark would break recognition: a reader scanning for your brand would skip past it. The move that works at 16 pixels is to keep the exact logo and wrap it in a coloured outline. The interior is untouched so it still reads as you; the ring is a strong enough signal on its own that the eye catches it before it reads any text.

That treatment generalises. The app stays clean, docs gets an outline, and if you want to go further, each subdomain gets its own frame colour from a shared palette — a visual language for surfaces that sits alongside the one you may already use for environments.

The differentiation has to survive the tab bar

Example favicon at 16 by 16 pixels
16px
Example favicon at 32 by 32 pixels
32px
Example favicon at 48 by 48 pixels
48px
Rendered at true pixel dimensions. Whatever you use to mark the docs icon has to read at 16px, because the tab bar is exactly where it does its work. An outline survives; fine interior detail or a tiny badge often does not.

Docs vs app favicon FAQ

Isn't one consistent favicon better for brand?

Consistency of the mark is good; identity of the tab is a different axis. Keeping the same logo and adding an outline preserves brand recognition completely — the interior is unchanged — while still letting a reader tell the docs tab from the app tab. You lose nothing on brand and gain a readable tab.

Does this only matter for developer tools?

It's sharpest for developer products, because their users keep docs and app open together for long sessions. But any product whose users reference documentation while working in the app — analytics tools, design tools, internal platforms — pays the same tab-bar tax.

How much work is it to maintain two icon sets?

Almost none. The docs set is generated from the same source mark with an outline applied, so a rebrand regenerates both at once. There's no second piece of artwork to keep in sync.

Generate your icon set

Keep reading