Favicon Search - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/favicon-search

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { FaviconSearch } from "@/components/ui/favicon-search"

<FaviconSearch
  placeholder="Enter a website URL…"
  onSearch={(value, domain) => console.log(domain)}
/>

Safari ITP — Cross-Origin Favicon Requests

This component resolves favicons via Google's favicon API. On iOS/Safari, Intelligent Tracking Prevention (ITP) may show a privacy warning because the request originates from a third-party domain. See Apple's ITP documentation and the WebKit blog on full third-party cookie blocking for details.

Recommended fix for production: proxy the favicon fetch through your own domain so Safari never sees a cross-origin request. Then point the component at your proxy via the iconSrc prop or by forking getFaviconUrl().

Safari Proxy Route

Create a Next.js API route that forwards requests to Google server-side:

// app/api/favicon/route.ts
export async function GET(req: Request) {
  const { searchParams } = new URL(req.url)
  const domain = searchParams.get("domain") ?? ""
  const sz = searchParams.get("sz") ?? "64"
  const upstream = "https://www.google.com/s2/favicons"
  const res = await fetch(upstream + "?domain=" + domain + "&sz=" + sz)
  const buf = await res.arrayBuffer()
  return new Response(buf, {
    headers: {
      "Content-Type": res.headers.get("Content-Type") ?? "image/png",
      "Cache-Control": "public, max-age=86400",
    },
  })
}

Wire it up by passing a custom URL to iconSrc, or fork getFaviconUrl() to return /api/favicon?domain=... instead of the Google URL.

API Reference

Prop	Type	Default	Description
`value`	`string`	—	Controlled input value.
`defaultValue`	`string`	—	Uncontrolled default value.
`onChange`	`(value: string) => void`	—	Called on every input change.
`onSearch`	`(value: string, domain: string \| null) => void`	—	Called when Enter is pressed.
`placeholder`	`string`	`'Enter a website URL…'`	Placeholder text.
`clearable`	`boolean`	`true`	Show clear button when input has value.
`faviconSize`	`16 \| 32 \| 64 \| 128`	`64`	Favicon resolution.
`debounce`	`number`	`350`	Debounce delay in ms.