@favicon-run/react

A tiny React component to render any website's favicon, backed by the favicon.run CDN proxy.

import { Favicon } from "@favicon-run/react";

<Favicon domain="github.com" size={32} />

No API key, no setup — the icon is served from https://favicon.run/favicon?domain=…&sz=… (edge-cached, CORS-open).

Install

npm install @favicon-run/react
# or: pnpm add @favicon-run/react  /  yarn add @favicon-run/react

react is a peer dependency (>=16.8).

Props

<Favicon> accepts all standard <img> props (className, style, loading, …) plus:

| Prop | Type | Default | Description | | -------- | -------- | ------------------- | ----------------------------------------------------------------- | | domain | string | — | Required. Site domain, e.g. "github.com". A full URL is accepted; the host is used. | | size | number | 32 | Square pixel size, clamped to 16–512. Also sets width/height. | | alt | string | "${domain} favicon" | Alt text. |

Helper

import { faviconUrl } from "@favicon-run/react";

faviconUrl("github.com", 64);
// => "https://favicon.run/favicon?domain=github.com&sz=64"

Useful when you need the URL itself — a <link rel="icon">, a CSS background-image, or a non-React setup.

Example

Works anywhere React does (Next.js, Vite, Remix, CRA…), and is SSR-safe:

import { Favicon } from "@favicon-run/react";

export function SiteList() {
  return (
    <ul>
      <li><Favicon domain="vercel.com" size={16} className="mr-2" /> Vercel</li>
      <li><Favicon domain="stripe.com" size={16} className="mr-2" /> Stripe</li>
      <li><Favicon domain="x.com" size={16} className="mr-2" /> X</li>
    </ul>
  );
}

How it works

The component renders <img src="https://favicon.run/favicon?domain=…&sz=…" />. The favicon.run endpoint resolves the site's icon and returns a cached PNG (Cache-Control: public, max-age=86400, Access-Control-Allow-Origin: *).

MIT © favicon.run