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 (opens in a new tab).

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

Example of Favicon

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.

A common name for a favicon image is favicon.ico.

Next, 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>