HTML Favicon

A favicon is used to display a small brand image next to the page title that displays on a browser tab.

As the image size is very small, it must be a simple image with high contrast to make sure it displays properly.

HTML element <link> can be used to define a favicon as shown below within the <head> section of an HTML document.

<link rel="icon" href="/assets/images/favicon.ico">

The attribute rel="icon" defines its relationship with the HTML document.

The icon file name can be anything but suggested to use favicon.ico as above.

Generate a favicon online for free

If you are looking for generating a favicon of your own for free, you can refer to the below article.

Example

<!doctype html>
<html lang="en">
<head>
    <title>Random Codez</title>
    <link rel="icon" href="/assets/images/favicon.ico">
</head>
<body>
    <h1>HTML Favicon</h1>
    <h2>Check the icon against the page title on browser tab.</h2>
</body>
</html>

Overall

A favicon can be added to an HTML document by linking it using the <link> element.