Add an Emoji Favicon to Your Site

gishtah
Code Like A Girl
Published in
2 min readJan 26, 2021

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

Screen shot showing favicons in tabs

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:

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

A website tab featuring a favicon icon
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 on the site!

CSS Resources

Optimize your CSS using CDT

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in Code Like A Girl

Welcome to Code Like A Girl, a space that celebrates redefining society's perceptions of women in technology. Share your story with us!

Written by gishtah

Bay Area Data , Art, Nature, and Sci-Fi Enthusiast

Responses (1)

What are your thoughts?

Thanks - this was a useful resource 👍

--