Favicon Search

A search input that fetches and smoothly animates the site favicon into the search bar as you type a URL.

Installation

File Structure

favicon-search.tsx

Usage

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

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

Controlled

import * as React from "react";
import { FaviconSearch } from "@/components/unlumen-ui/favicon-search";

const [value, setValue] = React.useState("");

<FaviconSearch
  value={value}
  onChange={setValue}
  onSearch={(val, domain) => {
    if (domain) window.open(`https://${domain}`, "_blank");
  }}
/>;

API Reference

FaviconSearch

Prop	Type	Default
`value?`	`string`	-
`defaultValue?`	`string`	`""`
`onChange?`	`(value: string) => void`	-
`onSearch?`	`(value: string, domain: string \| null) => void`	-
`placeholder?`	`string`	`"Enter a website URL…"`
`clearable?`	`boolean`	`true`
`faviconSize?`	`16 \| 32 \| 64 \| 128`	`64`
`debounce?`	`number`	`350`
`className?`	`string`	-
`inputClassName?`	`string`	-

Notes

Favicon source: uses the Google favicon API (https://www.google.com/s2/favicons?domain=…&sz=…). No API key required but subject to Google's availability.
Domain parsing: handles bare domains (stripe.com), full URLs (https://stripe.com/pricing), and www. prefixes — all resolve to the same favicon.
Fallback: while the favicon is loading a Globe icon is shown; if the fetch errors or the input is empty a Search icon is shown instead.
Animation: uses Motion AnimatePresence with a spring transition — scale + blur in/out so the icon swap feels organic.

Credits

Built by leo.