An easy way to add a Favicon to a website in HTML

Abdifatah Mo
2 min readDec 27, 2019

--

Today, I’m publishing my very first blog post on Medium and it’s going to start a very simple tutorial on how to insert a favicon inside our website.

The favicon for Wikipedia website is their logo.

If you actually don’t know what favicon is, it’s basically that small icon to the left of the address bar(just like the above Wikipedia webiste image).

In order to add a favicon to your website, you first need to decide whatever you’re using as a favicon whether it’s your personal image or your website logo or any other icon.

You first need to include a piece of code/link tag into your HTML file directly after title tags as below image shows:

<link rel=”shortcut icon” type=”image/jpg” href=””>

After that you need to determine the location of the image in your folder with the href attribute like this:

<link rel=”shortcut icon” type=”image/jpg” href=”../images/favicon.jpg”>

In this situation, I’m using my personal picture as a favicon to appear small icon to the left of the address bar like this:

As you can see my picture icon appears next to my title name.

Conclusion:

This is a very simple thing to do, it’s not really complicated; and you can create your own favicon for your website as it gives your site a more professional feel.

I hope you found this post helpful and thank you for reading! 🙏

--

--

Abdifatah Mo

A Front-End developer, documenting my journey to break into the tech world.