What is a text favicon?

A text favicon displays a letter, initials, or short text as the website's browser tab icon. This approach is used by many well-known brands — Google uses a colored 'G', Facebook uses 'f', and Medium uses 'M'. Text favicons are quick to create, instantly recognizable, and look clean at small sizes where complex graphics become illegible.

Common use cases

Text favicons are ideal for portfolios, corporate sites, SaaS products, and any brand that uses a logotype or monogram. They are faster to create than pixel-perfect icon designs and ensure the favicon remains legible at 16x16 pixels. Developers also use them during early development to give each project a distinct tab identity before finalizing branding.

<!-- SVG text favicon -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#3b82f6" />
  <text x="50" y="50" text-anchor="middle" dy=".35em"
    font-family="system-ui" font-size="60"
    font-weight="bold" fill="#fff">DB</text>
</svg>

<!-- Usage in HTML -->
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

// JavaScript — generate text favicon dynamically
const canvas = document.createElement('canvas');
canvas.width = canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = '#3b82f6';
ctx.fillRect(0, 0, 32, 32);
ctx.font = 'bold 20px system-ui';
ctx.fillStyle = '#fff';
ctx.textAlign = 'center';
ctx.fillText('DB', 16, 22);