HTML Favicon Tutorial

HTML Favicon

HTML Favicon is used to display an image before the title in the browser tab.

To display a favicon for the webpage, use <link> element and specify the image URL for the href attribute of <link> element.

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

Include the link element in the <head> section of the HTML.

Example

In the following example, we add a favicon to the HTML page using <link> tag.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

Place the favicon.ico in the root directory of the website.

Conclusion

In this HTML Tutorial, we learned how to specify a favicon for HTML page, with examples.