How To Add a 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 that 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:

Select the emoji type you prefer

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 greek vase (an amphora) 🏺 emoji to my site:

My website favicon

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 ob the site!

What are your favorite css tips to personalize your site?

Previously published at https://code.likeagirl.io/add-an-emoji-favicon-to-your-site-dc9a498773ce