How to use an emoji as your website's favicon

Much like Tony Blair’s campaign slogan of “education, education, education,” I recognize the importance of having something simple yet recognizable to engage with people.

While I’m not particularly focused on cultivating a ‘personal brand,’ there is still value in having a bold, recognizable icon for your website. This is especially true for drawing attention to vertical browser tabs or tabs where the title text has been truncated. After some research, I discovered a clever concept by Lea Verou PhD that allows you to use an emoji as your favicon. Below is an example of the code you need to insert between your HTML ‘head’ tags:

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌳</text></svg>">

Simply replace my little tree emoji with whatever emoji you’d like to use. A good resource for searching emojis is EmojiDB.

Now, you might be wondering if I did all this because Drew hates emojis and I wanted to torment him by introducing more of them into his life. Who’s to say? 🤷