Open In App

How to add a browser tab icon (favicon) for a website ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

rajneeshshukla.com

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">

HTML




<!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:

 


Last Updated : 17 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads