Emojis as favicons

So I was working on jsonresume.io this weekend and really wanted a favicon for the page. I don't know about you but I kind of dislike having to add a favicon. I don't really know how to make a icon and so I keep reaching more and more into the ever expanding unicode emoji sets.

I really wanted just to drop a 📝 into a <link /> tag and call it a day. As far as I knew this wasn't possible, prompting this tweet:

Which technical committee do I need to submit a proposal to in order to get emojis as favicons? @WHATWG ?

To make a long story short, I made my way to whatwg.org to figure out how to make a proposal. That lead me to this issue #661. That mentions that you can set the favicon dynamically with a data uri.

Turns out I don't need to do a proposal at all! Even though it's not as easy as <link rel="icon" value="🍕" /> it's still pretty straightforward if you can write some JavaScript. Here's the code I wrote to set the favicon of this post:

const canvas = document.createElement('canvas')
canvas.height = 64
canvas.width = 64

const ctx = canvas.getContext('2d')
ctx.font = '64px serif'
ctx.fillText('🛰', 0, 64)
console.log(canvas.toDataURL())

const favicon = document.querySelector('link[rel=icon]')
favicon.href = canvas.toDataURL()

You could even wrap this in a function and dynamically set the favicon.

Let me know if you enjoyed this post on twitter 🙌.

March 24th 2018 update.

I refined the script a bit and it ends up looking like this:

const favicon = document.querySelector("link[rel=icon]");

if (favicon) {
  const emoji = favicon.getAttribute("data-emoji");

  if (emoji) {
    const canvas = document.createElement("canvas");
    canvas.height = 64;
    canvas.width = 64;

    const ctx = canvas.getContext("2d");
    ctx.font = "64px serif";
    ctx.fillText(emoji, 0, 64);

    favicon.href = canvas.toDataURL();
  }
}

This change means that I only need to include this script and set the emoji I want as a favicon like so:

<link rel="icon" data-emoji="🛰" type="image/png" />

Exactly what I wanted orginally! 🤙

♥