Programming

How to Add a Favicon to Website in HTML

In this tutorial, we’ll show you how to add a favicon to website in HTML.

A favicon is a graphic image (icon) associated with a particular Web page and/or Web site. Favicons are small icon files that are displayed next to the URL of your site in a browser’s address bar. You can also generate a custom favicon through sites like favicon.cc.

A favicon is a small image that is located in the browser tab to the left of a webpage’s title. The image below illustrates the location of a favicon.

How to Add a Favicon to Website in HTML

To add favicon into your website, save the favicon image in your images directory. Next add the <link> element (highlighted below) to your index.html file right below the <title> element. Your code should now be like this:


<title> Sammy’s First Website </title>
<link rel="shortcut icon" type="image/jpg" href="Favicon_Image_Location"/>

Replace Favicon_Image_Location with the relative file path of your favicon image. Save and reload the web page. There you can see your favicon image.

We have successfully add a favicon.

In this tutorial, we have shown you how to add a favicon to website in HTML.

Related Articles