Favicon

Small icon representing the site in browser tabs.

html

<div class="favicon-demo">
  <div class="favicon-demo__tab">
    <span class="favicon-demo__mark favicon-demo__mark--rounded favicon-demo__mark--16 " style="background:#241430;" role="img" aria-label="Site favicon">C</span>
    <span class="favicon-demo__tablabel">Your Site</span>
  </div>
  <div class="favicon-demo__zoom">
    <span class="favicon-demo__mark favicon-demo__mark--rounded favicon-demo__mark--big " style="background:#241430;" aria-hidden="true">C</span>
    <p class="favicon-demo__caption">32 &times; 32 preview</p>
  </div>
</div>
<style>
.favicon-demo { display: flex; align-items: center; gap: 20px; max-width: 360px; font: 13px/1.4 system-ui, sans-serif; color: #241430; }
.favicon-demo__tab { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 8px 8px 0 0; background: #FAF7F2; border: 1px solid #24143022; border-bottom: none; }
.favicon-demo__tablabel { color: #24143099; }
.favicon-demo__mark { display: inline-flex; align-items: center; justify-content: center; color: #FAF7F2; font-weight: 700; line-height: 1; flex: none; }
.favicon-demo__mark--16 { width: 16px; height: 16px; font-size: 10px; border-radius: 4px; }
.favicon-demo__mark--big { width: 48px; height: 48px; font-size: 22px; border-radius: 12px; }
.favicon-demo__mark--circle { border-radius: 50% !important; }
.favicon-demo__mark--square { border-radius: 0 !important; }
.favicon-demo__mark--mono { filter: grayscale(1); }
.favicon-demo__zoom { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.favicon-demo__caption { margin: 0; color: #24143099; font-size: 11px; }
</style>

tailwind

<div class="favicon-demo-tw flex items-center gap-5 max-w-[360px] font-sans text-[13px] text-[#241430]">
  <div class="flex items-center gap-1.5 px-3 py-2 rounded-t-lg bg-[#FAF7F2] border border-b-0 border-[#24143022]">
    <span class="favicon-demo-tw__mark favicon-demo-tw__mark--rounded  inline-flex items-center justify-center w-4 h-4 rounded text-[10px] font-bold text-[#FAF7F2]" style="background:#241430;" role="img" aria-label="Site favicon">C</span>
    <span class="text-[#241430]/60">Your Site</span>
  </div>
  <div class="flex flex-col items-center gap-1.5">
    <span class="favicon-demo-tw__mark favicon-demo-tw__mark--rounded  inline-flex items-center justify-center w-12 h-12 rounded-xl text-[22px] font-bold text-[#FAF7F2]" style="background:#241430;" aria-hidden="true">C</span>
    <p class="m-0 text-[11px] text-[#241430]/60">32 &times; 32 preview</p>
  </div>
</div>
<style>
.favicon-demo-tw__mark--circle { border-radius: 50% !important; }
.favicon-demo-tw__mark--square { border-radius: 0 !important; }
</style>

react

export function FaviconDemo({
  letter = "C",
  bg = "#241430",
  shape = "rounded",
  monochrome = false,
}) {
  const radius = { circle: "50%", rounded: "30%", square: "0" }[shape] ?? "30%";
  const markStyle = (size, fontSize) => ({
    display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none",
    width: size, height: size, fontSize, fontWeight: 700, lineHeight: 1, color: "#FAF7F2",
    background: bg, borderRadius: radius, filter: monochrome ? "grayscale(1)" : "none",
  });
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 20, maxWidth: 360, font: "13px/1.4 system-ui, sans-serif", color: "#241430" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 12px", borderRadius: "8px 8px 0 0", background: "#FAF7F2", border: "1px solid #24143022", borderBottom: "none" }}>
        <span style={markStyle(16, 10)} role="img" aria-label="Site favicon">{letter}</span>
        <span style={{ color: "#24143099" }}>Your Site</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <span style={markStyle(48, 22)} aria-hidden="true">{letter}</span>
        <p style={{ margin: 0, color: "#24143099", fontSize: 11 }}>32 &times; 32 preview</p>
      </div>
    </div>
  );
}