Everyday Utilities Free • No signup • Instant results

Favicon Generator

Convert images into multi-size favicons for web apps.

Letter (1 char)

Background Color

Letter Color

Background Shape

Output Size (px)

About the Favicon Generator

The Favicon Generator produces a clean SVG favicon from a single letter and two colors — the kind of monogram favicon used by GitHub (cat silhouette), Notion (N), Linear (custom mark), and thousands of SaaS apps. Pick a letter (typically the first letter of your brand), choose background and foreground colors, pick a shape (square with rounded corners or circle), and download the resulting SVG.

SVG favicons are the modern replacement for the legacy multi-size PNG/ICO approach. A single SVG file scales from 16×16 (browser tab) to 512×512 (Apple touch icon) without pixelation. Modern browsers (Chrome, Firefox, Safari, Edge) support SVG favicons natively via <link rel="icon" type="image/svg+xml" href="/favicon.svg">. For legacy browsers (IE 11, old Safari), you should still include a fallback PNG.

The generator produces a true vector SVG, not a rasterized PNG. This means the favicon renders crisply on Retina displays, in dark-mode tab bars, and at any future browser UI scale. The file size is typically under 1 KB — smaller than a 16×16 PNG.

How It Works

The generator builds an SVG document with a 0×0 to 1×1 coordinate system (using viewBox="0 0 1 1") so all positions and sizes are normalized between 0 and 1. This makes the SVG resolution-independent: render at 16px or 1024px and the proportions stay identical.

The background is drawn as either a rounded rectangle (<rect rx="0.18" ry="0.18">) or a circle (<circle cx="0.5" cy="0.5" r="0.5">). The rx="0.18" value produces a moderate rounding that mimics the iOS app icon shape (superellipse approximation). For a sharper square, set rx="0.05"; for a fully rounded square (squircle), set rx="0.25".

The letter is drawn as SVG <text> with font-family="Arial,Helvetica,sans-serif" (the most universally available sans-serif), bold weight, centered horizontally via text-anchor="middle", and vertically centered via dominant-baseline="middle" at y=0.55 (slightly below center to compensate for the visual weight of typical Latin uppercase letters). The font-size is 0.55 SVG units, which scales the letter to roughly 55% of the icon’s height — visually balanced for most Latin characters.

The SVG is URL-encoded via encodeURIComponent and embedded as a data:image/svg+xml;utf8, URI. This allows the preview to render inline without a network round-trip. The download link uses the same data URI, which the browser saves as a file when the user clicks. The download attribute specifies the filename as favicon.svg.

For non-Latin characters (CJK, Arabic, Devanagari), the SVG will render using the browser’s default font for that script. The dominant-baseline="middle" may not center correctly for all scripts — you may need to adjust the y position. For emoji, the rendering depends on the browser’s emoji font.

Worked Examples

The default settings produce an SVG favicon with letter H, indigo background #667eea, white letter #ffffff, rounded square shape, and 64px preview size. The SVG source is roughly <svg viewBox="0 0 1 1"><rect width="1" height="1" rx="0.18" fill="#667eea"/><text x="0.5" y="0.55" font-size="0.55" font-family="Arial" font-weight="bold" text-anchor="middle" dominant-baseline="middle" fill="#ffffff">H</text></svg> — under 400 bytes.

Changing the letter to N and colors to #000000 background, #ffffff foreground produces a minimalist black-and-white favicon similar to Notion’s. Switching the shape to circle produces a round favicon suitable for use as a profile avatar or PWA icon.

For a brand-colored favicon, set the letter to the first letter of your brand name and the background to your brand color. The foreground should typically be white or near-white for contrast — use a contrast checker to verify WCAG AA compliance (4.5:1 ratio) for accessibility.

The 16×16 preview shows how the favicon will appear in browser tabs. At that size, complex shapes are illegible — a single bold letter is the only design that reads clearly. This is why nearly every major SaaS brand uses a single-letter favicon.

When to Use This Tool

Generating brand-consistent favicons for new SaaS apps without hiring a designer.
Producing placeholder favicons during development before the final brand mark is ready.
Creating themed favicons for seasonal landing pages (Halloween, holidays, product launches).
Building per-tenant favicons for white-label SaaS deployments where each customer gets a branded favicon.
Generating favicons for documentation sites, internal tools, and side projects quickly.
Teaching SVG syntax and the viewBox coordinate system in frontend training.
Prototyping brand mark ideas before committing to a full logo design.

Limitations & Disclaimer

This generator produces single-letter SVG favicons only. It does not support multi-character marks, custom logos, emoji, or rasterized PNG/ICO output. The default font is Arial/Helvetica (system sans-serif); custom web fonts are not embedded in the SVG file and may not render consistently across browsers when the favicon is displayed in the tab bar. For production deployments, you should still generate a full favicon set (PNG at 16, 32, 48, 180, 192, 512; ICO; Apple Touch Icon; manifest) using a tool like realfavicongenerator.net. The generated SVG works in modern browsers but does not cover legacy browsers, iOS, or Android PWA icons. See our disclaimer for full terms.

Frequently Asked Questions

Will SVG favicons work in all browsers?

Modern browsers (Chrome 80+, Firefox 84+, Safari 14+, Edge 80+) support SVG favicons natively. Internet Explorer and very old browsers do not — you should include a fallback PNG via a separate <code><link rel="icon" type="image/png" href="/favicon.png"></code> tag. iOS Safari uses Apple Touch Icons (180×180 PNG) regardless of the SVG favicon.

How do I add the favicon to my site?

Place the SVG file at <code>/favicon.svg</code> in your site root and add <code><link rel="icon" type="image/svg+xml" href="/favicon.svg"></code> to the <code><head></code> of your HTML. For PWA support, also add <code><link rel="apple-touch-icon" href="/apple-touch-icon.png"></code> with a 180×180 PNG version.

Why does my letter look off-center?

The default y=0.55 is tuned for Latin uppercase letters, which have visual weight above the geometric center. For lowercase letters with descenders (g, j, p, q, y), you may need y=0.60. For CJK characters (Chinese, Japanese, Korean), the geometric center is correct — use y=0.50. Adjust by editing the SVG source after generation.

Can I use a custom font for the letter?

Yes, by editing the <code>font-family</code> attribute in the SVG source. Web fonts loaded via <code>@font-face</code> in your HTML will be used by the favicon when rendered in the browser tab. For standalone SVG files (used as the actual favicon), only system fonts are available because the SVG has no access to your CSS @font-face declarations.

Can I add multiple letters or a logo?

Not with this generator — it is designed for single-letter monograms. For multi-letter marks or custom logos, design the SVG in a vector editor (Figma, Illustrator, Inkscape) and use it as your favicon. The generator is for the common case where you need a clean monogram favicon quickly.

What size should I export for Apple touch icons?

Apple touch icons should be 180×180 PNG. SVG favicons are not used for Apple touch icons — iOS rasterizes them at install time. Use a tool like realfavicongenerator.net to produce the full set of PNG sizes from your SVG source. The SVG file is still useful for modern browsers and PWA manifests.

Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team