diatone.net

Emojicons, and lessons in MIME types

2021-05-15

A few weeks ago I thought I'd set up a Twitter account, thinking "yeah, it will mostly be superfluous, but there will be that one time it is super useful that makes up for it". Well, that happened almost immediately:

Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg:

<svg xmlns="https://t.co/TJalgdayix" viewBox="0 0 100 100">
<text y=".9em" font-size="90">💩</text>
</svg>

Useful for quick apps when you can't be bothered to design a favicon! pic.twitter.com/S2F8IQXaZU
— Lea Verou, PhD (@LeaVerou) March 22, 2020

Being smitten by the idea of people finally being able to express themselves with the poo emoji as their site favicon, I took it upon myself to make a tool for this. Half a Saturday later, this is what we get: emojicons.

Now, no day project is complete without running the gauntlet of HN criticism, so I submitted emojicons to Hacker News and crouched in a defensive position for the other half of my Saturday. Lo and behold, it actually went down pretty well! There were was one really good piece of feedback though, related to the download mechanism, by @chrismorgan:

Don't break MIME types, if you can.
Don't break encoding, if you can help it.
Prompt a download, if you can.

The key takeaways here:

MIME types can contain additional qualifying information, in key-value pairs, not unlike URL query parameters. This lets us specify things like the character encoding - i.e.: what we need to make sure emojis don't get garbled across machines.
The SVG MIME type isn't "text/svg", which although is correct in the sense that, yes, the data is written in text, it's not what it's used for. "image/png" is used to describe an image, despite how that image is serialized. The same is true for SVG, so really the MIME type for SVG is "image/svg+xml".

To top it off, I've added a favicon for this site. Not bad for a fresh Twitter account!