ITZDABBZZ
Back to tools
Visual Utilspublic tool

SVG Favicon Generator

Build a crisp SVG favicon from a letter, initials or an emoji, then copy the markup, a data-URI link tag for your head, or a matching web manifest entry.

Glyph
D
Shape
Rounded square
Background
#8b5cf6
SVG size
384 chars

Preview

Rendered at 16, 32 and 64 pixels

16px
32px
64px
Browser tab
Your page title

Glyph

What the favicon shows

Glyph type
Background shape
Font weight (700)
Contrast check

Foreground matches the readable ink for this background

SVG markup

Save as favicon.svg or inline it

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="D">
  <rect x="0" y="0" width="64" height="64" rx="14" fill="#8b5cf6" />
  <text x="32" y="32" fill="#ffffff" font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif" font-size="36" font-weight="700" text-anchor="middle" dominant-baseline="central">D</text>
</svg>

Data URI

Percent-encoded for a link href

data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20role%3D%22img%22%20aria-label%3D%22D%22%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2232%22%20y%3D%2232%22%20fill%3D%22%23ffffff%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20%27Segoe%20UI%27%2C%20Roboto%2C%20sans-serif%22%20font-size%3D%2236%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3ED%3C%2Ftext%3E%0A%3C%2Fsvg%3E

HTML link tags

Paste into your <head>

<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20role%3D%22img%22%20aria-label%3D%22D%22%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2232%22%20y%3D%2232%22%20fill%3D%22%23ffffff%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20%27Segoe%20UI%27%2C%20Roboto%2C%20sans-serif%22%20font-size%3D%2236%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3ED%3C%2Ftext%3E%0A%3C%2Fsvg%3E" />
<link rel="mask-icon" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20role%3D%22img%22%20aria-label%3D%22D%22%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2232%22%20y%3D%2232%22%20fill%3D%22%23ffffff%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20%27Segoe%20UI%27%2C%20Roboto%2C%20sans-serif%22%20font-size%3D%2236%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3ED%3C%2Ftext%3E%0A%3C%2Fsvg%3E" color="#8b5cf6" />
<meta name="theme-color" content="#8b5cf6" />

manifest.json snippet

Add these entries to your web app manifest

{
    "name": "Your app",
    "short_name": "D",
    "icons": [
        {
            "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20role%3D%22img%22%20aria-label%3D%22D%22%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2232%22%20y%3D%2232%22%20fill%3D%22%23ffffff%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20%27Segoe%20UI%27%2C%20Roboto%2C%20sans-serif%22%20font-size%3D%2236%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3ED%3C%2Ftext%3E%0A%3C%2Fsvg%3E",
            "sizes": "any",
            "type": "image/svg+xml",
            "purpose": "any"
        },
        {
            "src": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20width%3D%2264%22%20height%3D%2264%22%20role%3D%22img%22%20aria-label%3D%22D%22%3E%0A%20%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22%238b5cf6%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2232%22%20y%3D%2232%22%20fill%3D%22%23ffffff%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20%27Segoe%20UI%27%2C%20Roboto%2C%20sans-serif%22%20font-size%3D%2236%22%20font-weight%3D%22700%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22central%22%3ED%3C%2Ftext%3E%0A%3C%2Fsvg%3E",
            "sizes": "any",
            "type": "image/svg+xml",
            "purpose": "maskable"
        }
    ],
    "theme_color": "#8b5cf6",
    "background_color": "#8b5cf6",
    "display": "standalone",
    "start_url": "/"
}