Branding and favicon

Favicon setup

Every Enjab tool ships the favicon via @enjab-ui/favicon. Install it once:

npx shadcn@latest add @enjab-ui/favicon

This adds app/icon.tsx and app/apple-icon.tsx (code-generated PNG icons: the Enjab gradient square plus a glyph). Safari renders these natively, so no separate .ico is needed.

Edit the glyph

Open app/icon.tsx and find the GLYPH constant at the top. Replace it with a letter or paste an icon's inline SVG:

const GLYPH = "E"; // Change to your letter, or paste an icon's raw <svg> markup

Do the same in app/apple-icon.tsx. Use the same glyph in both files.

Delete old static icons

If the project had a previous version with app/icon.svg, delete it so it doesn't clash with the code-generated icons.

In-app brand mark

Render the same glyph in your app wherever it shows its own square icon or logo (sign-in panels, header marks, dashboards). Mirror the glyph SVG into one small component so the tab icon and the on-screen mark stay identical.

Sidebar brand and app-mark

Use the @enjab-ui/app-mark component in the sidebar and landing navbars. It combines the favicon square and the tool name:

import { AppMark } from '@enjab-ui/app-mark';

<AppMark name="Your Tool" glyph="Y" />

Pass the same glyph you set in app/icon.tsx.

The sidebar component (@enjab-ui/sidebar) accepts appName and appIcon props. Pass the glyph there too, and it renders the tool's own brand at the top, not the Enjab logo.

Enjab parent logo

The Enjab logo (@enjab-ui/logo) appears in EXACTLY ONE place: the "an Enjab product" byline.

• Sidebar dashboards: use @enjab-ui/sidebar-footer (account block plus byline) pinned to the bottom.
• Dashboards without a sidebar: place @enjab-ui/enjab-byline anywhere sensible.

Never put the Enjab logo in the navbar or sidebar top. Never restyle these components (fixed sizes keep all dashboards identical).

Branding rules summary

All Enjab tools use light mode only. Reference theme tokens (bg-teal, text-navy, bg-success) instead of hardcoding colors.