Add an Emoji Favicon to Your Site

What’s a favicon you may ask? It’s the tab icon next to the page’s name:

It could really add pop and uniqueness to your site. Not all of us have the talent or budget to design our own favicon, but fret not — you can easily search your for an emoji that speaks to you and incorporate it into your site as a favicon!
First, visit this site and search for an emoji icon — it’s basically the ‘Google’ of emojis! Next, scroll through the pictures that represent what the emoji looks like for different devices, and find the one you gravitate towards. Right-click, and select “Copy Image Address”. I chose the emoji as it looks like for Apple devices:

Time to add it to your code! Go to your index.html file, and between the <head> tags add a <link> tag with the address link you just copied:
<link rel=”icon" href="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/amphora_1f3fa.png">
I decided to add a vase (an amphora) 🏺 emoji to my site:

And voila!
Other things to think about are: what your favicon will look like in dark or light browser themes ( what if the favicon is all white or all black?). Here’s a bit about light and dark mode. Also, you can consider adding notification alerts to your favicon when there’s an unread alert on the site!