OpenMoji

You might have noticed that the favicon of this blog has changed recently, or noticed that the fediverse handle @b.yuxuan.org@b.yuxuan.org has an avatar now.

This is because I recently added OpenMoji support to PandaBlog.

For some context and to refresh your memory, PandaBlog is forked from PolarBearBlog, and PolarBearBlog had a kinda genius way of setting the favicon of the blog: in the Admin dashboard it asks you to set an emoji as the favicon, then it uses an inline SVG to render that emoji as the favicon. The SVG looks like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">{{SiteFavicon}}</text></svg>

As a result, your browser will just use whatever the default font your system uses to render the emoji as the favicon of this blog.

That worked great for browsers, but at the era of social media, it doesn’t work so well for social media sites (e.g. Mastodon) to generate a snippet of the link shared from your blog, as most of those social media websites don’t support SVG as an image format.

So, I wanted to actually render the emoji to a more conventional image format (JPG or PNG) to make it look better outside of the browsers.

Initially I tried to embed Google’s Noto Color Emoji font into the code and use go’s font library to draw the emoji into an image. But:

1. The opentype package doesn’t seem to be able to support color fonts and cannot really load Noto Color Emoji font (there’s an error defined that seems to imply that it does not support color emoji renderings);
2. The other freetype library seems to be able to load the Noto Color Emoji font better, but I still cannot figure out how to render the emoji onto an image correctly.

Then, a few weeks later, I randomly discovered OpenMoji, an open source emoji collection, which already rendered (almost) all emojis defined in Unicode into PNG images, so I changed my approach from using Noto Color Emoji font to use OpenMoji images directly:

1. I generated the list of files available from OpenMoji, so in case an emoji is not supported by OpenMoji, I can still fallback to the SVG rendering solution;
2. Then, for emojis supported by OpenMoji, I just convert the emoji into the OpenMoji filename (use hex encoding of the Unicodes, then use the URL templates for OpenMoji’s big (618x618) and small (72x72) URLs)

This worked very well. As a result:

1. For browsers, the favicon changed from the render of the emoji of your system font, to OpenMoji’s rendering;
2. For Bridgy Fed, now since the favicon is PNG, it used the PNG version of the favicon as the avatar of my @b.yuxuan.org@b.yuxuan.org fediverse handle.
3. For social media sites, the big rendering from OpenMoji is now used as the image preview of the URL.

I’m currently using tropical fish emoji as the favicon of this blog, so it looks like this from OpenMoji: