What’s a favicon you may ask? It’s the tab icon next to the page’s name: It could really add that 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! pop First, visit 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 “ ”. I chose the emoji as it looks like for Apple devices: this Copy Image Address 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?). 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! Here’s 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

Too Long; Didn't Read

Making security fun one episode at a time

How To Add a Favicon to Your Site

Too Long; Didn't Read

SoonaM

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How To Add a Favicon to Your Site

Too Long; Didn't Read

SoonaM

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES