Using an Emoji as a Favicon
You can set an emoji as a favicon by pointing the icon link at an inline SVG data URI that holds the emoji as text, with no image file at all. It works in modern browsers instantly. It's a great placeholder, but the emoji is drawn by the operating system's own font, so it looks different across Windows, macOS, Android and iOS, and it won't satisfy /favicon.ico or home-screen icons. For anything past a quick start, export a real set.
One line, no file
The trick is an inline SVG data URI: the link's href is an SVG that draws the emoji as a text element, so there's no separate image to host. Modern browsers render it in the tab immediately, which makes it a perfect placeholder while you build.
The emoji itself is drawn by whatever emoji font the viewer's operating system ships, so the same favicon looks subtly (or not so subtly) different on each platform.
The one-liner
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦊</text></svg>"
/>Swap in any emoji. In production, URL-encode the special characters: some browsers are fussy about raw angle brackets in a data URI.
Emoji favicon FAQ
Can I use an emoji as a favicon?
Yes, via an inline SVG data URI that renders the emoji as text. It works in modern browsers with no image file, which makes it a handy quick placeholder.
Why does my emoji favicon look different on each device?
Because the emoji is drawn with the operating system's own emoji font. Apple, Google, and Microsoft each draw the same emoji differently, so your favicon inherits that variation.
Is an emoji favicon good enough for production?
As the only icon, no. It doesn't cover /favicon.ico or home screens, and it looks inconsistent across platforms. Use it to start, then export a proper set for launch.