What is the code for an emoji favicon?

Put an emoji inside an inline SVG data URI in a link tag: 🎯 ">. Encode the inner quotes as %22 and make sure the page has .

Does the emoji favicon SVG trick work in Safari?

No. Safari only uses SVG for its pinned-tab mask-icon, so an inline SVG emoji favicon does not appear in a normal Safari tab. To cover Safari and iOS, render the emoji into a real favicon.ico plus PNG set instead of relying on the SVG one-liner.

Can I use any emoji as a favicon?

Yes, but pick a bold, simple emoji. A favicon is often shown at 16x16 - fewer pixels than a single emoji at normal size - so detailed or thin artwork turns to mush. High-contrast, chunky emoji read best in a browser tab.

Why is my emoji favicon not showing?

Three common causes: you are viewing in Safari (which ignores the SVG trick), the inner quotes were not URL-encoded as %22, or the browser cached the old icon. Encode the SVG correctly, test in Chrome, and hard-refresh or bust the cache with a versioned filename.

Do I need PNG files or is the SVG enough?

For a quick prototype the SVG line is enough. For a real site you want the PNG and ICO files too, because Safari, older browsers, iOS home screens, and Google's search favicon all need real raster icons. Generating the full set covers every surface.

All articles

Blog

How to make an emoji favicon that works in every browser

To make an emoji favicon you have two solid options. The quickest is a one-line inline SVG in your HTML head, which renders the emoji as your icon in Chrome, Edge, and Firefox. Safari and older browsers ignore that trick, so for an icon that shows everywhere - plus the Apple touch and PWA sizes - render the emoji into a real favicon.ico and PNG set instead.

By Nico Jaroszewski · 3 July 2026 · 7 min read

To make an emoji favicon you have two genuinely good options. The fastest is a one-line inline SVG in your HTML <head>, which draws the emoji straight into your browser tab in Chrome, Edge, and Firefox with zero image files. The catch: Safari and older browsers ignore it, and it gives you nothing for iOS home screens, Android, or the icon Google shows next to your result. So when you are shipping to real users, the reliable route is to render the emoji into a real favicon.ico plus PNG set that works everywhere. Here is exactly how to do both.

Method 1: the one-line emoji favicon (inline SVG)

You do not need any files for a quick emoji favicon. An SVG can hold a <text> element, and a data URI lets you embed that SVG directly in a <link> tag. Drop this single line into your <head> and your tab shows the emoji:

One line in your <head> - swap in any emoji

<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>">

Decoded, the SVG it embeds is just this:

The same SVG, decoded and readable

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

How the snippet works

viewBox="0 0 100 100" sets a 100x100 coordinate space the emoji is drawn into.
font-size="90" scales the emoji to nearly fill that box.
y=".9em" nudges the glyph down so it sits centered rather than clipping at the top.
%22 is a URL-encoded double quote. Because the whole SVG lives inside an href attribute, the inner quotes must be encoded (or use single quotes) so the markup does not break.

One more gotcha: make sure your page declares <meta charset="UTF-8"> before this tag, or the emoji can render as garbled characters. Because SVG is a vector, a single tag with sizes="any" scales to every tab size without extra files.

The catch: where the SVG one-liner breaks

The inline-SVG trick is elegant, but it is a progressive enhancement, not a complete favicon. Know its limits before you rely on it:

Safari does not render it in the tab. Safari only uses SVG for its pinned-tab mask-icon, so an SVG emoji favicon simply does not show for a large share of visitors.
No iOS or Android home-screen icon. There is no Apple touch icon and no 192/512 PWA icons, so "Add to Home Screen" falls back to a screenshot or a blank glyph.
Weak for Google. Google prefers a real, square file that is a multiple of 48px; a lone inline SVG is not a dependable search-result favicon.
No /favicon.ico fallback. Older browsers, feed readers, and some OS surfaces still request a root ICO they will not find.

If you want the deeper story on scalable-vector favicons and their fallbacks, see the SVG favicon guide.

Method 2: render the emoji into a real icon set (works everywhere)

The bulletproof approach is to bake the emoji into an actual icon set - a multi-resolution favicon.ico, the PNG sizes browsers and Google want, plus the Apple touch and PWA icons. Because those are ordinary raster files, every browser (Safari included) and every device shows them.

You do not have to draw them by hand. The free Text & Emoji Favicon Generator renders your emoji onto every size live in your browser - nothing uploaded, no sign-up - and hands you a ZIP with:

favicon.ico bundling 16, 32, and 48 - the universal fallback.
PNG favicons at 16, 32, 48, and 96, including the 48px-multiple size Google prefers.
apple-touch-icon.png (180x180, opaque) for the iOS home screen.
Android and PWA icons (192, 512, and a maskable 512) plus a site.webmanifest.
A copy-paste head snippet so wiring it up is one paste:

The head snippet a generated set gives you

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

One thing to expect: an emoji does not look identical on every system. Apple, Google, Microsoft, and Twemoji each draw the same emoji a little differently, so a generated icon reflects the emoji font of the browser that created it - but the shape is then fixed in the PNG, so it stays consistent for your visitors from then on.

Inline SVG vs a generated icon set

What matters	Inline SVG one-liner	Generated .ico + PNG set
Setup	One line in the head	Download files, paste the snippet
Chrome / Edge / Firefox	Yes	Yes
Safari tab	No	Yes
Apple touch / PWA icons	No	Yes (180, 192, 512, maskable)
Google search favicon	Unreliable	Yes (48px-multiple PNG)
Best for	A quick prototype or side project	Anything you ship to real users

Prefer letters? Make a text favicon instead

If a monogram fits your brand better than an emoji, the same tool makes a text favicon from one to three initials: pick a font, a shape, and your colors, and it exports the identical complete set. It is the cleanest way to give a new site a real identity before you have a logo. Start in the text and emoji favicon generator; when you do have a logo, the main generator turns it into the full set with background removal.

How to install your emoji favicon

Whichever method you pick, wiring it up is the same short routine:

Place the files at your site root (for a generated set), so /favicon.ico and the PNGs resolve.
Paste the link tags into your <head> - either the single SVG line or the full snippet above.
Hard-refresh to clear the old icon. Browsers cache favicons hard; if the old one lingers, follow how to force a favicon refresh.
Verify it. Open the icon URLs directly, or run the favicon checker against your live site. The complete favicon guide has the full markup and framework wiring.

Frequently asked questions

What is the code for an emoji favicon?: Put an emoji inside an inline SVG data URI in a link tag: <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>">. Encode the inner quotes as %22 and make sure the page has <meta charset="UTF-8">.
Does the emoji favicon SVG trick work in Safari?: No. Safari only uses SVG for its pinned-tab mask-icon, so an inline SVG emoji favicon does not appear in a normal Safari tab. To cover Safari and iOS, render the emoji into a real favicon.ico plus PNG set instead of relying on the SVG one-liner.
Can I use any emoji as a favicon?: Yes, but pick a bold, simple emoji. A favicon is often shown at 16x16 - fewer pixels than a single emoji at normal size - so detailed or thin artwork turns to mush. High-contrast, chunky emoji read best in a browser tab.
Why is my emoji favicon not showing?: Three common causes: you are viewing in Safari (which ignores the SVG trick), the inner quotes were not URL-encoded as %22, or the browser cached the old icon. Encode the SVG correctly, test in Chrome, and hard-refresh or bust the cache with a versioned filename.
Do I need PNG files or is the SVG enough?: For a quick prototype the SVG line is enough. For a real site you want the PNG and ICO files too, because Safari, older browsers, iOS home screens, and Google's search favicon all need real raster icons. Generating the full set covers every surface.

Free forever, no sign-up

Generate your full icon set free

Drop one logo into the generator and download favicon.ico, every PNG size, the Apple touch icon, Android, PWA, and maskable icons, plus the manifest and HTML snippet - all in your browser, nothing uploaded.

Open the generator