How to add icon logo in title bar using HTML ?
Adding an icon logo in the title bar refers to placing a small image or icon next to the title of a webpage in the browser’s tab. This visual identifier helps users quickly identify and differentiate between multiple open tabs. favicon enhances website recognition and SEO. By using the <link> tag with the rel attribute set to “icon” and href pointing to the icon file, the favicon is displayed in the browser tab alongside the title.
Preview Image:
Syntax:
<link rel="icon" href="icon_path" type="image/icon type">
Example: In this example, we are using the above written syntax in the head tag of html.
<!-- HTML code to add icon in the title bar -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>w3wiki icon</title>
<!-- add icon link -->
<link
rel="icon"
href=
"https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200X200.png"
type="image/x-icon"
/>
</head>
<body>
<h1 style="color: green">
w3wiki
</h1>
<p>
w3wiki icon added in the title
bar
</p>
</body>
</html>
Output: