HTML Favicon

HTML Favicon

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

How To Add a Favicon in HTML

You can use any image as a favicon, or make your own on a site like favicon.cc. It shows to the left of the page title in the browser tab.

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

Save your favicon image (a common name is favicon.ico) in the root directory of your web server, or in an images folder there. Then add a <link> element in your index.html file, after the <title>. Save and reload the page, and the browser tab will show your favicon.

Favicon link

A complete page that links to a favicon in the head.

index.html 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

Favicon File Format Support

All major browsers (Edge, Chrome, Firefox, Opera, and Safari) support favicon images in ICO, PNG, GIF, JPEG, and SVG formats.

Chapter Summary

To recap: use the HTML <link> element to add a favicon.

HTML Link Tag

The tag here is <link>, which defines the relationship between a document and an external resource.