How to Make an Emoji or Letter Favicon

Q: How do I use an emoji as a favicon?

Put the emoji inside an SVG <text> element and reference it as a data-URI in one link tag: <link rel='icon' href='data:image/svg+xml,...'> . The SVG markup must be URL-encoded, and you draw the emoji with a viewBox and a large font-size . It works in modern Chrome, Edge, and Firefox; Safari falls back to your favicon.ico .

Q: Why isn't my emoji favicon showing in Safari?

Safari has limited SVG favicon support, so a data-URI or favicon.svg emoji icon often won't render there. Safari falls back to whatever /favicon.ico it can find. If you need Safari coverage, generate a real .ico and PNG set alongside the SVG rather than relying on the one-liner.

Q: Can I make a favicon from a single letter or initial?

Yes — it's the same SVG <text> technique. Draw a background <rect> or <circle> for colour, then center a styled letter on top with text-anchor='middle' . Save it as favicon.svg or inline it as a data-URI, exactly like an emoji.

Published June 9, 2026

Make an emoji or single-letter favicon in one line: an inline SVG that draws the character as text, referenced as a data-URI in a single link tag.

The fastest way to get an emoji favicon is a single <link> tag — no files, no export, no build step. You inline a tiny SVG that draws the emoji as a <text> element and pass it to the browser as a data-URI. Drop one line in your <head> and the tab shows a rocket, a coffee cup, or a single letter. It’s ideal for prototypes, internal tools, and quick demos where you just want something in the tab.

In one line: an emoji favicon is an inline SVG <text> element, URL-encoded into a data-URI on one <link> tag.

The catch is that this is a speed trick, not a brand asset. It works beautifully in modern Chrome, Edge, and Firefox, falls back in Safari, and renders the emoji differently on every operating system. Below is the exact one-liner, the cleaner saved-file version, how to do the same with a letter, and when to graduate to a real icon set.

The data-URI one-liner

Here’s the whole thing. Paste it into your <head> and you have an emoji favicon:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

Three things are doing the work here:

viewBox="0 0 100 100" gives the SVG a coordinate system to scale within. Without it the icon won’t size correctly in a tab.
font-size="90" makes the glyph nearly fill that 100-unit canvas.
y=".9em" drops the text baseline down so the emoji sits centred rather than clipped at the top.

Swap 🚀 for any emoji — ☕, ✅, 🔥, whatever fits the project.

The quote-escaping gotcha

The reason that line looks odd is that it’s URL-encoded. The data-URI lives inside an HTML attribute, and SVG markup is full of characters HTML doesn’t like inside one. The key trick: the SVG’s own attribute quotes are written as %22 (the encoded double quote), which lets you wrap the whole href in normal double quotes without the browser ending the attribute early.

A few rules that keep it working:

Encode the inner quotes as %22.
If a colour value uses #, encode it as %23 — a raw # starts a URL fragment and truncates your SVG.
Keep the SVG minimal. The more markup you add, the more there is to encode and break.

If the icon silently fails to load, broken encoding is almost always why. Validate the SVG on its own first, then encode it.

The cleaner approach: save it as favicon.svg

The one-liner is great for a throwaway page, but inline data-URIs are hard to read and easy to mangle. For anything you’ll touch again, save the same SVG as a real favicon.svg file and link to it normally:

<!-- favicon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <text y=".9em" font-size="90">🚀</text>
</svg>

<link rel="icon" href="/favicon.svg" type="image/svg+xml">

Now the markup is plain — no %22, no encoding — and you can edit it in any text editor. This is the better default for a real (if simple) project, and it’s exactly the kind of file a generator produces too. See SVG favicons – when to use them & browser support for where SVG icons shine and where they don’t.

Letter and initial favicons

A single-letter favicon uses the same <text> technique, with a background shape behind a styled glyph. This is the classic “coloured square with an initial” look:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <rect width="100" height="100" rx="20" fill="#4f46e5"/>
  <text x="50" y="50" font-size="60" font-family="sans-serif" fill="#fff"
        text-anchor="middle" dominant-baseline="central">F</text>
</svg>

What each piece does:

<rect> with rx="20" draws a rounded-square background. Swap it for <circle cx="50" cy="50" r="50"> if you want a round badge.
text-anchor="middle" and dominant-baseline="central" centre the letter both horizontally and vertically.
fill sets the colours — one on the background shape, one on the text.

Save it as favicon.svg, or inline it as a data-URI exactly like the emoji version (remember to encode the # in colour values as %23). A letter favicon avoids the cross-OS rendering differences emoji have, which makes it a slightly safer quick option.

Emoji vs letter vs a real icon set

Approach	Best for	Effort	Limitation
Emoji data-URI	Prototypes, demos, internal tools	One line	Renders differently per OS; no Safari/ICO fallback
Letter SVG	Placeholder branding, MVPs	A few lines	Still not a logo; SVG-only support
Full exported set	Production, real brands	One upload	None — covers every browser and device

The limitations (be honest about these)

An emoji or letter favicon is a genuine shortcut, but it comes with real trade-offs:

Emoji look different on every OS. A 🚀 on Windows, macOS, Android, and Linux are four different drawings. You don’t control the artwork — the operating system does.
No .ico fallback unless you make one. The SVG-only approach means Safari (limited SVG favicon support) and any older client get nothing and fall back to whatever /favicon.ico they can find. If there’s no ICO, the tab shows a blank icon.
It isn’t your brand. An emoji is a stock glyph; a letter is a placeholder. Neither is a logo, and at small sizes a real mark is what makes your tab recognisable. (More on that in favicon best practices for branding.)
It’s still a favicon, with all the usual surfaces. If you’re unsure what a favicon even covers, start with what is a favicon.

For a quick internal dashboard, none of this matters. For a real product, all of it does.

When to graduate to a full favicon

The moment the project stops being a prototype, switch to a proper icon set built from your actual logo. A real set covers every browser and device — a multi-size favicon.ico for Safari and legacy clients, a scalable favicon.svg, an opaque 180×180 Apple touch icon, and the PWA sizes — instead of relying on one SVG that some browsers ignore.

The good news: you don’t have to hand-export any of it. FaviconBuilder takes one upload (SVG preferred, or a PNG/JPG at 512×512 or larger) and generates the whole set from one upload, free, no account, and the image never leaves your browser — plus the exact copy-paste HTML and manifest. When your emoji favicon has done its job, that’s the upgrade. (Step-by-step: create a favicon from an image or logo →)

Summary

An emoji or letter favicon is the fastest icon you can ship: an inline SVG <text> element, URL-encoded into a data-URI on a single <link> tag, or saved as a tidy favicon.svg file.

The one-liner — data:image/svg+xml,<svg ...><text>🚀</text></svg>, with inner quotes encoded as %22.
The saved file — same SVG written to favicon.svg, linked with type="image/svg+xml"; cleaner and editable.
Letters — a <rect> or <circle> background plus a centred, styled glyph.
The limits — emoji vary by OS, there’s no Safari/ICO fallback unless you add one, and it’s not a brand mark.

Use it for speed; switch to a generated set the moment it’s a real site.

Continue reading:

Frequently asked questions

How do I use an emoji as a favicon?

Put the emoji inside an SVG <text> element and reference it as a data-URI in one link tag: <link rel='icon' href='data:image/svg+xml,...'>. The SVG markup must be URL-encoded, and you draw the emoji with a viewBox and a large font-size. It works in modern Chrome, Edge, and Firefox; Safari falls back to your favicon.ico.

Why isn't my emoji favicon showing in Safari?

Safari has limited SVG favicon support, so a data-URI or favicon.svg emoji icon often won't render there. Safari falls back to whatever /favicon.ico it can find. If you need Safari coverage, generate a real .ico and PNG set alongside the SVG rather than relying on the one-liner.

Can I make a favicon from a single letter or initial?

Yes — it's the same SVG <text> technique. Draw a background <rect> or <circle> for colour, then center a styled letter on top with text-anchor='middle'. Save it as favicon.svg or inline it as a data-URI, exactly like an emoji.

Is an emoji favicon good enough for a real website?

It's perfect for prototypes, internal tools, and quick demos, but not ideal for a brand. Emoji render differently on each operating system, there's no .ico fallback unless you generate one, and it's not a logo. For production, export a proper favicon set from your actual mark.

Do I have to URL-encode the SVG in a data-URI favicon?

Yes. The data-URI sits inside an HTML attribute, so characters like <, >, #, and the double quotes inside the SVG must be encoded — the common trick is to write the SVG's own quotes as %22. Skipping this breaks the markup and the icon silently fails to load.

Related guides

← All guides