FaviconPouch

Favicon generator & icon tools

Emoji · one line of HTML

Emoji favicon generator

The quickest favicon there is: an SVG with a single emoji in it, small enough to paste straight into your page as a data URI. Add a background tile if you like, and download PNG and ICO fallbacks.

1Emoji

Faces & people

Animals & nature

Food & drink

Objects & tools

Symbols & signs

Places & travel

2Style & preview

The SVG favicon as your browser draws it
SVG, drawn by your browser
PNG fallback
90%
Background

Light tabs1× · 2×

Dark tabs1× · 2×

Real pixelszoomed

16 × 16
32 × 32
48 × 48

Use it

One line: paste into <head>

<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext x='50' y='50' font-size='90' text-anchor='middle' dominant-baseline='central'%3E🦊%3C/text%3E%3C/svg%3E">

Works in browsers that support SVG favicons. For the rest, add the files below.

The ZIP adds favicon-snippet.html with the tags to paste.

Tags for the files

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

favicon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text x="50" y="50" font-size="90" text-anchor="middle" dominant-baseline="central">🦊</text></svg>

How it works

The SVG holds one <text> element with your emoji, centred in a 100 × 100 box. Because it is text, each visitor's browser draws it with their own emoji font: the same fox looks different on an iPhone, on Windows and on Android. That is the honest trade-off of emoji favicons.

The PNG and ICO files are drawn on this page, so they freeze the emoji design of the device you are using now. Some emoji sets, such as Google's Noto Emoji, are open source; others, like Apple's, are not licensed for reuse as images, so check before shipping a PNG of them as your logo.

Use the size slider to leave breathing room, and a background tile to keep pale emoji visible on light tab bars.

Questions

Do I need any files for the one-line version?

No. The data URI contains the whole SVG, so the single link tag is enough in browsers that support SVG favicons. Add favicon.ico as well if you want older browsers and feed readers covered.

Why is my emoji shown as a box or two symbols?

The device viewing the page has an older emoji font without that character, or without that combination (some skin tones and families are newer). Common emoji are the safest choice.

Can the emoji change in dark mode?

The emoji itself keeps its colours. A background tile helps it stand out on both light and dark tab bars.