How to add a Favicon by Linking it in the Head tag in HTML

A favicon is an icon used to represent the website that you're on.

You typically see them in the browser tab, but they can also be used in other places, such as bookmarks, or in the address bar.

A favicon is an extremely important thing for a website to add because it helps users to identify your website and differentiate it from other websites.

In this post, we'll learn how you to can add a favicon to your website using HTML.

How to add a favicon using HTML

First, make sure you have a favicon to link to, usually named favicon.ico. The recommended file format is ico but you can also use png or gif.

Once you have your favicon, you can add it to your website by adding the following line to the <head> section of your HTML document:

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

This is if you are linking an ico file. If you want to link a png file, it looks like this:

	<head>
    <link rel="icon" href="favicon.png" type="image/png" />
</head>

Notice how not only does the link change, but also the type attribute.

The type attribute is used to specify the type of the file you are linking to. This is important because it helps the browser to know how to handle the file.

Once you add those lines to your HTML document, you should see your favicon in the browser tab as your browser should attempt to load the favicon.

Conclusion

In this post, we learned how to add a favicon to your website using HTML.

It only takes a single line of HTML to do for something so useful for your users.

Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!