Text to Favicon: How to Make a Favicon from Letters or Initials

Make a text favicon in one minute

The fastest route is the Text tab of the free favicon generator — it is the tab that opens by default:

1. Type one to three characters. Your initial, initials or a short number.
2. Pick a heavy font. Arial Black, Impact, Verdana or Trebuchet MS hold up best at small sizes. Text is always rendered bold.
3. Set the colours. Use a colour preset or type your brand hex codes for the background and the text.
4. Choose the corner radius. 0% is a square, around 20% is a modern rounded tile, 50% is a circle.
5. Check the 16 px preview, then download. The preview shows 16, 32, 48 and 64 px side by side in light and dark tabs.

The ZIP contains a multi-size favicon.ico, PNG icons from 16×16 to 512×512, apple-touch-icon.png, the two Android Chrome icons and site.webmanifest. That is everything a website needs; the rest of this guide is about making the letters look good.

How many characters should a text favicon use?

One character is almost always best. At 16×16, a capital letter is about 11 pixels tall. Two characters halve the width each one gets; three make each letter roughly 4 pixels wide.

If two brands in your space share a first letter, a two-letter monogram or a symbol (&, #, a digit) is more distinctive than a third letter.

Six worked text favicon examples

Each of these can be recreated in the generator's Text tab with the settings shown.

Notice what they have in common: one dominant shape, a solid background, and a light character on a dark or saturated colour.

Choosing the font

At 16 px, the details that make a typeface interesting become noise. What matters is stroke thickness and open shapes.

• Best: Arial Black and Impact (very heavy strokes), Verdana (wide, open letters designed for screens), Trebuchet MS.
• Fine: Arial and Helvetica, especially for single capitals.
• Use with care: Georgia and Times New Roman — serifs blur at 16 px but can work for one bold capital or a symbol.
• Avoid: Courier New (thin, spaced-out strokes) and Comic Sans MS (reads as informal and loses shape small).

Prefer letters with open counters — the spaces inside letters like C, G, O and E. Tight lowercase letters such as a, e and g fill in and turn into blobs. If your brand starts with I, l or 1, which look identical in many sans-serifs, use another letter or a symbol.

Colour and contrast

The most reliable pattern is a white or very light letter on your brand colour. The colour becomes the recognisable part of the icon, and white gives the highest contrast against any saturated background.

A dark letter on a white background works in a light-mode tab bar but turns into a glowing white square in dark mode. Pale brand colours (pastels, light greys) blend into both light and dark tab bars — use a deeper shade of the same hue for the background.

Avoid combinations with similar brightness: yellow on white, blue on dark grey, red on green. Check your pair in the generator's dark preview before downloading.

Shape and corner radius

• Rounded square (15–25%) — the default for most brands; looks at home next to other tabs.
• Circle (50%) — friendlier and more distinctive; leave extra space so the letter does not touch the curve.
• Square (0%) — technical or editorial brands.

Corner radius only affects the tab and desktop icons. iOS and Android apply their own masks to home-screen icons — see the Apple touch icon and maskable icon sections of the mobile guide.

The 16 px test

Zooming in on your design tells you nothing about how it reads in a tab. Look at the actual-size 16 px preview and ask:

• Could someone name the letter without being told? If not, try a heavier font or a different letter.
• Does the background stand out from the tab bar in both light and dark mode?
• Are the counters still open? A filled-in a or e means you need an uppercase letter or a wider font.
• Does it look centred? Letters such as P, F and L look off-centre even when they are mathematically centred, because their weight sits on one side. A slightly smaller font size leaves more even space around them; otherwise choose a more symmetrical letter.

Dark mode and text favicons

PNG and ICO files are static, so the safest approach is a design that already works on both light and dark tab bars: light letter, saturated background. If you want the colours to switch, you can hand-write an SVG favicon alongside the downloaded files:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <style>
    .bg { fill: #1e40af; }
    @media (prefers-color-scheme: dark) { .bg { fill: #3b82f6; } }
  </style>
  <rect class="bg" width="100" height="100" rx="20"/>
  <text x="50" y="72" font-size="62" text-anchor="middle" fill="#fff"
        font-family="Arial Black, Arial, sans-serif" font-weight="900">N</text>
</svg>

Text inside an SVG uses the visitor's installed fonts, so stick to widely available fonts or convert the letter to a path in a design tool. The SVG favicon guide covers the details, and ICO vs PNG vs SVG explains when the SVG is worth adding.

Add your text favicon to a website

Upload the files from the ZIP to your site root and add this to your <head>:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Using WordPress or Shopify instead? Upload the 512×512 PNG through the platform — see the WordPress and Shopify guides. Then run your URL through the favicon checker to confirm every file loads. Why these exact sizes: favicon sizes guide.

Text favicon or logo favicon?

Use text when you have no logo yet, when your logo is a wordmark that is unreadable at 16 px, or when you need a placeholder today. Use your logo when it has a simple, distinctive symbol — upload it in the generator's Image tab, or use the SVG to favicon converter for vector files. Many brands do both: the symbol for the favicon, the full wordmark everywhere else.