Skip to content
H HT99.
Read Articles
Everyday Utilities Free · No signup · Private · Instant results

Favicon Generator

Generate SVG favicons from a letter and color palette.

About the Favicon Generator

This Favicon Generator produces SVG-format favicons from a letter or short text, a background color, and a foreground color. SVG favicons are resolution-independent — one file renders crisp at 16×16 (browser tab), 32×32 (bookmark), 180×180 (iOS apple-touch-icon), 192×192 (Android PWA), and 512×512 (PWA splash screen) without any raster artifacts.

Favicons are the small icons displayed in browser tabs, bookmark bars, shortcut menus, and home-screen launches. A recognizable favicon increases brand recall and helps users locate your site in a sea of browser tabs. The modern standard supports SVG (vector) for crispness at any resolution plus raster fallbacks (PNG, ICO) for legacy browsers.

This generator produces a single SVG file that you reference in your HTML head with <link rel="icon" type="image/svg+xml" href="/favicon.svg">. For maximum compatibility, also generate raster PNGs at 16, 32, and 180 pixels and reference them as fallbacks. The apple-touch-icon link uses <link rel="apple-touch-icon" href="/apple-touch-icon.png"> for iOS home-screen icons.

How It Works

The generator builds an SVG document with three elements: an outer <svg> root with a viewBox sized to your chosen dimensions, a background shape (<rect> or <circle>) filled with your background color, and a <text> element centered both horizontally (text-anchor="middle") and vertically (dominant-baseline="central").

The shape selection uses CSS-style border-radius conventions: square applies a small radius (18% of size) for a rounded-square look, circle uses a <circle> element with radius equal to half the size, and squircle uses the iOS-style superellipse approximation with radius 27% of size for a softer-than-square but harder-than-circle appearance.

The font stack prioritizes system fonts (−apple-system on macOS/iOS, Segoe UI on Windows, Roboto on Android) so the favicon renders consistently across platforms without bundling a web font. The font-weight is set to 700 (bold) for legibility at small sizes — a 1-character letter at 16×16 needs to be bold to remain recognizable.

The SVG output is a self-contained XML document with no external dependencies. The browser caches it after the first load, and subsequent page views reuse the cached version. The SVG scales losslessly to any size because it is a vector format — the same file works equally well at 16 pixels and 1024 pixels.

Worked Examples

Letter H on a deep emerald #0A4F3A background with cream #FAF7F0 text in squircle shape at 180×180 — the apple-touch-icon size for iOS. The single SVG file replaces three separate PNG exports (16, 32, 180) without quality loss.

Letter HT (2 characters) on the same palette. Multi-character favicons work best at sizes 32 and above; below 16, individual characters become unreadable and a single letter is preferable.

A circular favicon at 512×512 with letter 9 for an anniversary or version-number brand — suitable for PWA splash screens on Android and desktop. The 512×512 size is required by Chrome’s PWA install prompt.

When to Use This Tool

  • Site identity icons for browser tabs, bookmarks, and shortcuts.
  • iOS apple-touch-icons at 180×180 for home-screen launches.
  • Android PWA icons at 192×192 and 512×512 for installable web apps.
  • Brand variations for special occasions (holiday logos, anniversary icons).
  • Per-section or per-page favicons for multi-tenant SaaS dashboards.
  • Letter-based avatars for user accounts that have not uploaded a profile image.
  • Internal tool icons for dashboards, admin panels, and developer documentation sites.

Limitations & Disclaimer

This tool generates SVG-format favicons from text, background color, and foreground color. It supports single-letter, 2-character, and 3-character inputs; longer strings render unreadable at 16×16 and 32×32. The SVG uses system font stacks for portability; custom web fonts are not supported because the SVG would need to embed the font file (which inflates size). For raster PNG and ICO outputs, convert the SVG with a tool like sharp (Node), ImageMagick, or Figma’s export panel. SVG favicons require modern browsers (Chrome 51+, Firefox 49+, Safari 14+, Edge 79+); provide PNG fallbacks for legacy browsers. See our disclaimer for full terms.

Frequently Asked Questions

Why SVG instead of PNG or ICO?

SVG is a vector format that scales losslessly to any resolution. A single SVG file replaces 5+ PNG exports (16, 32, 180, 192, 512) without quality loss. SVG is supported by all modern browsers including Chrome, Edge, Firefox, and Safari 14+. For legacy browsers (IE11 and older Android), provide a PNG fallback via <code>&lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot;&gt;</code>.

What sizes should I generate?

For full coverage: 16&times;16 and 32&times;32 for browser tabs and bookmarks, 180&times;180 for iOS apple-touch-icon, 192&times;192 and 512&times;512 for Android PWA. With SVG you can generate one file and reference it at any size. For PNG fallbacks, export the same SVG at 16, 32, 180, 192, and 512 pixels.

How do I add the favicon to my HTML?

<code>&lt;link rel=&quot;icon&quot; type=&quot;image/svg+xml&quot; href=&quot;/favicon.svg&quot;&gt;</code> for the SVG, plus <code>&lt;link rel=&quot;apple-touch-icon&quot; href=&quot;/apple-touch-icon.png&quot;&gt;</code> for iOS. Place the link tags inside <code>&lt;head&gt;</code>. The SVG MIME type <code>image/svg+xml</code> is required for some browsers to recognize the file.

Why does my favicon look blurry in some browsers?

If you reference a PNG favicon at small sizes (16&times;16), the browser scales it down with bilinear filtering, producing blur. Switch to SVG for crispness, or provide explicit size variants via <code>sizes=&quot;16x16 32x32 64x64&quot;</code> so the browser picks the right one. Also check that the SVG file is served with <code>Content-Type: image/svg+xml</code>.

Can I use multiple characters or an emoji?

Yes &mdash; the tool accepts up to 3 characters. Emoji render correctly in modern browsers using the system emoji font, but the appearance varies across platforms (iOS Apple emoji vs. Android Google emoji vs. Windows Segoe UI emoji). For brand consistency, prefer letters rendered in the system font stack.

How do I generate raster PNG versions?

This tool generates SVG only. For raster PNGs, open the SVG in a vector editor (Figma, Sketch, Inkscape), resize it to 16, 32, 180, 192, and 512 pixels, and export each as PNG. Alternatively use the <code>sharp</code> Node.js library to convert the SVG to PNGs programmatically: <code>sharp(svgBuffer).resize(180).png().toFile('apple-touch-icon.png')</code>.

Last updated: September 9, 2026  ·  Author: HT99 Tools Editorial Team