How To Add Icon Logo In Title Bar Using HTML ? - GeeksforGeeks

Adding an icon logo in the title bar of a webpage using HTML involves setting a favicon. A favicon is a small icon displayed in the browser tab next to the page title. This is done by including a <link> tag in the HTML <head> section with the rel=”icon” attribute pointing to the icon file.

Preview Image:

icon logo in title bar using HTML

How to Add a Favicon in HTML

To add a favicon, use the following syntax in the <head> section of your HTML document:

Syntax:

<link rel="icon" href="icon_path" type="image/icon type">

Example: This example demonstrates how to add a favicon to your webpage by including the appropriate syntax in the <head> tag of your HTML document.

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:

adding icon logo in title bar using HTML

Adding a favicon to your webpage is a straightforward process that significantly enhances user experience and website recognition. By including a simple <link> tag in the <head> section of your HTML document, you can ensure that your favicon appears in the browser tab, making it easier for users to identify your site among multiple open tabs.

N

NAYONIKA Follow Improve Previous Article How to target desktop tablet and mobile using Media Query? Next Article Retrieve the position (X,Y) of an element using HTML

Từ khóa » Html Tag For Website Logo