How to add icon logo in title bar using HTML ?
Last Updated :
17 Apr, 2024
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
<!-- HTML code to add icon in the title bar -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>GeeksforGeeks icon</title>
<!-- add icon link -->
<link
rel="icon"
href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png"
type="image/x-icon"
/>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<p>
GeeksforGeeks icon added in the title
bar
</p>
</body>
</html>
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...