A browser tab icon, also known as a favicon is a small image that appears before the title of a webpage in the browser tab or bookmark bar to represent a website. It helps in brand recognition, improves user experience, and makes the website stand out among others. Adding a favicon can help users easily identify your website and differentiate it from other open tabs.
In this article, we will discuss how to add a favicon to a website using HTML. A favicon is a small image that is always displayed next to the page title in the browser tab.
The part which is highlighted with yellow color shows the favicon or browser icon. The small GeeksforGeeks image shown in the tab is the favicon we are talking about.
To add a favicon to a website, you need to create an icon file in .ico or .png format, and then reference it in the HTML code:
Approach: Use an existing icon: If you have an existing icon in .ico, .png, or .gif format, you can use it as a favicon. To use an existing icon as a favicon, add the following code to the head section of your HTML document:
<link rel="icon" type="image/png" href="path-to-favicon">
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<title>
GeeksforGeeks
</title>
<!-- add icon link -->
<link rel="icon" href=
type="image/x-icon">
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p>
Welcome to my website
</p>
</body>
</html>
|
Explanation:
- <link>: This tag is used to link to external resources like stylesheets and favicons.
- rel=”icon”: This attribute indicates that the link points to a favicon.
- type=”image/png”: This attribute specifies the MIME type of the file, which in this case is an icon.
- href=”https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200X200.png”: This attribute points to the location of the icon file. The filename and extension can be changed as needed.
Output: