Favicon

A round site favicon with a globe fallback.

import { Card } from "@/components/ui/card";

import { PerplexityFavicon } from "../components/perplexity-favicon";

const DOMAINS = ["techcrunch.com", "theverge.com", "wired.com", "reuters.com"];

export default function PerplexityFaviconExample() {
  return (
    <Card className="bg-pplx-bg ring-pplx-border flex w-full min-w-0 flex-row items-center justify-center gap-3 rounded-2xl p-6">
      {DOMAINS.map((domain) => (
        <PerplexityFavicon domain={domain} key={domain} />
      ))}
      <PerplexityFavicon className="size-6" domain="axios.com" />
    </Card>
  );
}

$ bunx --bun shadcn@latest add @notra/perplexity-favicon

PerplexityFavicon is a shadcn Avatar that loads the favicon for domain from Google’s favicon service. While it loads, or if it fails, you see a globe icon. Size it with className, it defaults to size-4. perplexityFaviconSrc(domain) returns the image URL if you need it elsewhere.

Used in

Perplexity

A full recreation of a Perplexity thread with search steps, citations with hover cards and the composer.