Favicon Badge

Circular website favicon badge with optional label text.

Installation

npx shadcn@latest add @iconiq/favicon-badge

File Structure

Usage

"use client";

import { FaviconBadge } from "@/components/ui/favicon-badge";

export function FaviconBadgePreview() {
  return (
    <FaviconBadge label="Iconiq UI" size="md" website="iconiqui.com" />
  );
}

Props

Props
Description

FaviconBadge

website

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

Type string

label

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

Type string

faviconUrl

Optional favicon URL that bypasses Google and DuckDuckGo resolution. Use for self-hosted icons or strict CSP environments.

Type string

faviconSize

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

Type 16 | 32 | 64 | 128·Default 64

size

Visual scale for the circular favicon badge container. Label text scales with size: `text-sm` on small, `text-base` on medium, and `text-lg` on large.

Type "sm" | "md" | "lg"·Default "md"

className

Merged onto the root inline-flex wrapper.

Type string

badgeClassName

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

Type string

labelClassName

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

Type string

onFaviconLoad

Called after a favicon URL resolves successfully, including when `faviconUrl` is provided.

Type (url: string) => void

onFaviconError

Called when every provider fails or an override URL fails to load.

Type () => void

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

Attributed tovercel.comfor.