Favicons are the small images displayed beside a website's title. They typically feature the website's logo or an image associated with the site. The same image is displayed on your bookmark tab when you save a website in Chrome or Firefox.

Check out the favicons of Hashnode and TradingView below👇

Apart from serving as the website's logo, the favicon also serves other purposes, some of which include:

1. Enhancing the website's aesthetics.

2. Making the website easily recognizable to visitors.

3. Providing the website with a polished appearance.

I used to believe that adding favicons to a website was a challenging task, something only experienced developers could manage.

However, the process of adding favicons to a website is actually simpler than you might think. You just need to follow the steps outlined in this article to successfully add a favicon to your website.

Creating the image for the favicon

You can design a simple logo for your website using Photoshop or Adobe Photoshop.

If you prefer not to create a logo yourself, you can perform a quick Google search for websites that can automatically generate a logo for you.

Alternatively, you can choose any unique image of your preference. It doesn't have to be the most aesthetically pleasing image in the world; it can even include your website's letters or other relevant elements.

Generating the favicon:

To generate the favicon, visit http://tools.dynamicdrive.com/favicon/. Dynamic Drive's favicon generator is a free website that allows you to create favicons without any hassles or stress.

While there are undoubtedly other websites available for generating favicons, for the purposes of this article, I'm going to use Dynamic Drive's favicon generator.

On the homepage, which resembles the following👇

• Click on the choose file option and select the image you have previously created in photoshop

• Click on create icon button

After the favicon has been created you will get a message like this👇

You also get guidelines and tips as to how you can add the favicon to your HTML document.

Adding the favicon to your HTML:

After creating the favicon, the next thing you should do is download it. Once you've downloaded the favicon, follow these steps to add it to your HTML:

1. Add the favicon file to the root of your working folder. This means you should not place it in another folder within the directory.

• You might also want to rename the favicon to whatever name suits you. as you can see, my name of mine is the-favicon.ico

• Now add this code to the head element of your website right above the link to your stylesheet

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

You can find the code above on the dynamic drive favicon generator if you scroll down a bit.

• After adding the link to the head of your HTML, change the href attribute of the favicon to point to the name you already have.

• Refresh your website to view your favicon, and if it still doesn't show press shift+f5 to clear the cache and you'll see your favicon sitting pretty right next to your title.

This is my favicon above 👆 I guess it doesnt look so pretty and that's because I didn't create it myself. I just used a random picture and converted it to a favicon.

Conclusion

So, this is how you can add a favicon to your website. I encourage you to try it out and incorporate favicons into all your projects and websites, as they enhance the aesthetics and professionalism of your work.

I encourage you to take your creativity to the next level by designing beautiful logos and images using Photoshop or any other image editor, rather than relying on existing images.

Please consider sharing this article with friends who may be interested in implementing favicons on their websites. Thank you for reading.