Why does my emoji look different from a friend's?

Because it is not one drawing. Apple, Google and Microsoft each ship their own artwork for the same character. The file you download freezes the one your machine drew, so everyone who visits your site sees that version.

Can I put an emoji straight in the HTML instead?

There is a trick that puts an emoji in an inline SVG favicon, and it works in current browsers. It also leaves the drawing up to each visitor's device and gives you nothing for the home screen or the manifest, which is most of what a favicon set is for.

Which emoji survive at sixteen pixels?

The ones with a single strong silhouette — a bolt, a lock, a leaf, a rocket. Anything with a face, fine detail or several colours competing turns into a blob. Check the tab preview, which shows the real size rather than a scaled-up version.

Should the background be dark or light?

Whichever your emoji is not. The tab preview shows the icon on both a light and a dark browser theme, and a coloured background is usually safer than transparency because it keeps the silhouette intact either way.

Do I get the same files as the other generators?

Yes — the same ICO, PNGs, apple-touch-icon, manifest and markup. Only the input differs.

Emoji Favicon Generator

Pick an emoji and take away a complete favicon set — ICO, PNGs, manifest and markup. Browse the symbols instead of hunting for the keyboard shortcut.

Shape Padding 12%

Background

In a tab

My Site

An emoji is drawn with the font your own system provides, so the icon you get here is the system drawing of it. Someone on another system sees your file, not their own emoji — which is the point, but it does mean the result reflects the machine it was made on.

Site name

Short nameTheme colour

What you get

favicon.ico16, 32, 48 px
favicon-16x16.png16 px
favicon-32x32.png32 px
apple-touch-icon.png180 px
android-chrome-192x192.png192 px
android-chrome-512x512.png512 px
maskable-icon-512x512.png512 px
site.webmanifestjson

After a launcher cuts it

Circle

Rounded

Squircle

Teardrop

Everything important sits inside the circle the specification guarantees will survive.

Safari's pinned tab needs a single-colour drawing, which an emoji is not. That one file is left out.

Paste into <head>

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0f172a">

An emoji is the fastest recognisable mark a small project can have, and picking one is easier than typing one — so the 79 symbols here are laid out to browse and search rather than to recall a keyboard shortcut for. The catch is worth knowing before you start: emoji are drawn by whichever font your own device supplies, so the same symbol looks different on a Mac, a Windows machine and an Android phone. What you download is a picture of the one your system draws, and every visitor then sees that picture rather than their own.

How it is calculated

glyph → canvas → PNG → ICO + manifest

The emoji is drawn into a square canvas at each size the set needs, then encoded. Because the drawing is rasterised here, the result stops depending on the visitor's device the moment the file is written — which is exactly why a picture is generated instead of the character being used directly.

Source: W3C Web Application Manifest — the icons member and the ImageResource fields src, sizes, type and purpose

Questions people ask

Why does my emoji look different from a friend's?: Because it is not one drawing. Apple, Google and Microsoft each ship their own artwork for the same character. The file you download freezes the one your machine drew, so everyone who visits your site sees that version.
Can I put an emoji straight in the HTML instead?: There is a trick that puts an emoji in an inline SVG favicon, and it works in current browsers. It also leaves the drawing up to each visitor's device and gives you nothing for the home screen or the manifest, which is most of what a favicon set is for.
Which emoji survive at sixteen pixels?: The ones with a single strong silhouette — a bolt, a lock, a leaf, a rocket. Anything with a face, fine detail or several colours competing turns into a blob. Check the tab preview, which shows the real size rather than a scaled-up version.
Should the background be dark or light?: Whichever your emoji is not. The tab preview shows the icon on both a light and a dark browser theme, and a coloured background is usually safer than transparency because it keeps the silhouette intact either way.
Do I get the same files as the other generators?: Yes — the same ICO, PNGs, apple-touch-icon, manifest and markup. Only the input differs.

Related tools

generatorImage

Favicon Generator

Turn one image into the whole favicon set — ICO, PNGs, web manifest and the markup to paste. Crop and position the image first, and nothing leaves your browser.

generatorImage

Text Favicon Generator

Make a favicon from a letter or initials — choose the font, colours and shape, and take away the whole set with the markup to paste. No image needed.

Found a problem, or want more?

A number that disagrees with its source is a defect, not a rounding preference.

What did you enter, what did the tool show, and what did you expect instead? If you have a source that disagrees with ours, a link to it is the most useful thing you can send.

Write to us

Opens your mail app with the page and tool already filled in.