Creating favicons from emojis and SVGs

Recently I was working on a side project, EverythingIsShowbiz.com, a mostly-vibe-coded transcript search engine for the "What Did You Do Yesterday?" podcast. This being a rare case of "side project that actually got finished", eventually I got to the launch point, and the last few fiddly bits - setting proper title tags, open graph tags for social network sharing, and needing a favicon.

What's a favicon?

Favicons are the little icons that show next to the title of the page in the browser tab. Historically these were small 16x16 or 32x32 .ico files. They would typically have been stored at the root of a domain - still today many browsers will make a request to /favicon.ico if no favicon is specified in the html tags of a page.

<!-- Traditional favicon markup -->
<link rel="shortcut icon" href="/favicon-16x16.ico" type="image/x-icon">

Over the years, favicons were shown in larger and larger areas - bigger tabs, desktop tiles, bookmark sections, mobile home screen icons, and the like. The larger number of areas where our favicon might show meant that we then got the option to specify multiple sizes, supporting these different locations. Very quickly a simple favicon section in html markup could potentially get more complex:

<!-- Traditional favicon markup -->
<link rel="shortcut icon" href="/favicon-16x16.ico" type="image/x-icon">

<!-- Higher-res favicons -->
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64x64.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- iOS-specific icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

This is a lot of faff when I have done the hard work of building a project, and just want the dopamine hit of pushing the thing live! At this point I don't even have a great idea yet for a favicon - I just want to push the thing live and be done with it.

Emoji favicons

Doing a lot of vibe-coding on this project meant regularly asking an LLM to help me polish up some text, add a header, etc. As anyone who has worked with LLMs for a non-trivial amount of time will tell you, they love sprinkling emojis ❄️ all 🙌 over 😎 the 🚀 text. ✅

Fine, let's just pick a broadly-suitable emoji, and we'll use that as a favicon. The site is about a podcast, so let's go with the radio microphone emoji 🎙️ as a favicon. But rather than going through the faff of having to create pngs of this emoji, isn't there a simpler way to set it as a favicon? Turns out the answer is "Yes!" Well, closer to "yes-ish", but let's see...

Inline svgs

Many modern browsers will support svgs as favicons. I could create an svg file containing my emoji icon:

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

Here the viewBox is set at a nominal 100 pixels, with the y=.9em and font-size=90 values meaning that the emoji renders at about 90% of the available height, leaving a little room around the edges. Now if I go back to my html, I can set this svg's location as my favicon:

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

I reload the browser, and - hey presto! - we have a favicon.

Cutting requests down

When optimising web pages for performance, cutting the number of requests to the bare minimum is a key part of building a fast site. Many times in the past I've used inline svgs to shave a bit off a page's load time, so wondered if there was a way to do this with my svg-based favicon. Off I went on this side quest to what was already a side project, and, as luck would have it, it is indeed possible to serve an inline svg as a favicon! Following the technique outlined in this CSS Tricks article, if I set the content of the svg as a data uri, I can set the href of my <link> tag to the svg content directly:

<link rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='0.9em' font-size='90'>🎙️</text></svg>">

I reload in my modern browser of choice, and it works! We've cut down on a request - an insignficant page speed boost in the grand scheme of things, but now we've got the favicon in our main markup, easier to remember to change it if we need to in future.

Not so fast!

This seems like a great success, nice and simple, and without needing to generate a slew of favicons for different browsers and tools. However, it quickly fell apart when I started to share the site across various social networks. Apps like Slack and Whatsapp will attempt to preview site information whenever a link is shared in their tools. Their crawlers will go to a site, check the markup for the open graph tags, and also attempt to load a favicon for their preview.

These bots unfortunately are broadly incapable of handling inline svgs, or svgs at all, for that matter. They register as "not found", so their crawlers will make requests to urls like /favicon.ico and /apple-touch-icon.png, even if these urls are never specified in the markup. So my wonderful and simple inline svg solution means that social shares in apps like whatsapp end up with the default globe icon. Not the end of the world, but equally, not ideal. And there's a similar problem for many systems which assume an ico or a png will be the favicon - they're generally not built to handle svg alternatives.

Finally I had to bite the bullet, and use a boring old png. I found Emoji to Image, which is a quick way of getting an emoji as a png with transparent background, and rolled back to some slightly more traditional favicon markup:

<link rel="icon" type="image/png" sizes="64x64" href="/favicon.png">
<link rel="shortcut icon"  type="image/x-icon" href="/favicon.ico">

So it is technically possible to create favicons by using emojis as inline svgs. However, if you want your icon to show reliably outside the browser tab, then for the time being we're probably stuck with pngs!