How to Add a Website Icon in HTML

Learn how to add a website icon (Favicon) in HTML.

How to Add a Website Icon in HTML

The website icon (favicon) is a small image displayed next to the page title in the browser tab.

You can use any image you like as a website icon. You can also create your own website icon on websites like https://favicon.cc.

Tip:The website icon is a small image, so it should be a simple image with high contrast.

The website icon image is displayed on the left side of the page title in the browser tab, as shown below:

Example of website icon

To add a website icon to your website, save your website icon image in the root directory of the web server, or create a folder named "images" in the root directory and save your website icon image there. The common name for the website icon image is "favicon.ico".

Next, in the "index.html" file, <title> Add an element after <link> Elements, as shown below:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Try it yourself

Now, save the "index.html" file and reload it in your browser. Your browser tab should now display your website icon on the left side of the page title.