HTML Favicon

A favicon is a small image displayed next to the page title in the browser tab.

How to Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on sites like favicon.cc.

To add a favicon to your website, either save your favicon image to the root directory of your webserver, or create a folder in the root directory called images, and save your favicon image in this folder.

Then, add a `<link>` element to your `index.html` file, after the `<title>` element, like this:

<!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>

The `<link>` element belongs inside the `<head>` section of the HTML document.

Favicon File Format Support

Browser	ICO	PNG	GIF	JPEG	SVG
Edge	Yes	Yes	Yes	Yes	Yes
Chrome	Yes	Yes	Yes	Yes	Yes
Firefox	Yes	Yes	Yes	Yes	Yes
Safari	Yes	Yes	Yes	Yes	Yes
Opera	Yes	Yes	Yes	Yes	Yes

Favicon Example

Result