Favicon Badge

Circular website favicon badge with optional label text.

Installation

npx shadcn@latest add @iconiq/favicon-badge

Props

FaviconBadge

Inline circular badge that resolves a website favicon from a domain or URL, with an optional text label and spring entrance animation.

websitestring

Required

Domain or full URL used to resolve the favicon. Values such as `iconiqui.com` or `https://www.iconiqui.com` are normalized to a hostname.

labelstring

Optional label rendered beside the circular favicon badge. When omitted, only the badge is shown and the domain is exposed to screen readers.

faviconSize16 | 32 | 64 | 128

Default 64

Pixel size requested from Google's favicon service. Higher values can improve clarity on retina displays.

size"sm" | "md" | "lg"

Default "md"

Visual scale for the circular favicon badge container. Label text stays at the standard `text-sm` size.

classNamestring

Merged onto the root inline-flex wrapper.

badgeClassNamestring

Merged onto the circular favicon container for local border, background, or sizing overrides.

labelClassNamestring

Merged onto the optional label when `label` is provided.

Extends native `span` props (`id`, `onClick`, `data-*`, and other `aria-*` attributes) via prop spreading on the root.

Favicons are resolved from Google and DuckDuckGo icon services after `extractDomain` normalizes the `website` value.

The component preloads favicons with cancellation-safe `Image()` requests and falls back through multiple providers before showing the `Globe` placeholder.

When `label` is omitted, the root uses `role="img"` with an `aria-label` derived from the label, domain, or raw `website` value.

Exports `extractDomain`, `getFaviconUrl`, and `FaviconBadgeSize` for reuse in search fields or attribution rows.

Install path is `components/ui/favicon-badge.tsx` with named and default `FaviconBadge` exports. Requires `@/lib/utils` (`cn`).

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: motion, lucide-react.

Requires the local `cn` helper from `@/lib/utils`, which is included in a standard shadcn setup.