Favicon Generator

Generated a well-formed SVG favicon with 0 finding(s).

How it works

• Normalised the background and foreground colours to lower-case hex.
• Drew the shape and the escaped monogram on a 64×64 SVG canvas.
• Emitted the data URI, the link tags and a matching manifest.

• The SVG favicon scales to every size without a raster asset.
• SVG favicons are supported by current Firefox, Chrome, Edge and Safari.

Methodology

1. Normalise the supplied colours to a canonical six-digit lower-case hex value.
2. Draw a background shape and centered, escaped monogram text inside a 64×64 viewBox.
3. Serialise the SVG, percent-encode a data URI, and build the link and manifest snippets.

Usage

1. Enter one or two characters (or an emoji) for the icon.
2. Enter the background and foreground colours as 3- or 6-digit hex (for example "#090d16").
3. Choose a square, rounded or circle shape.
4. Generate and copy the SVG, the data URI or the link tags.

Examples

These are examples, not current values: they use fixed inputs, while the interactive tool computes live results in your browser.

A rounded monogram favicon

{
  "monogram": "G",
  "background": "#090d16",
  "foreground": "#f8fafc",
  "shape": "rounded"
}

A circular emoji favicon

{
  "monogram": "⚡",
  "background": "#2563eb",
  "foreground": "#ffffff",
  "shape": "circle"
}

Limitations

Favicons and the browser

A favicon is the small icon a browser shows for a page. An SVG favicon is a single XML file that the browser can render at any size.

Link the generated file with `<link rel="icon" type="image/svg+xml" href="/favicon.svg">` in the document head.