Open In App

How To Add a Favicon in HTML?

Last Updated : 19 Apr, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Adding an icon (also known as a favicon) to the title bar of a webpage is an essential feature for any website. This small visual element improves the user experience and makes your site easily identifiable in browser tabs.

Preview Image

icon logo in title bar using HTML

To add a favicon to your HTML website, follow these simple steps.

1. Create or Choose a Favicon Image

  • The most common size for a favicon is 16x16 pixels or 32x32 pixels.
  • Use formats like .ico, .png, or .jpg.

2. Upload the Favicon to the Root Directory

  • Upload the favicon image (e.g., favicon.ico) to the root directory of your website.
  • Link the Favicon in the HTML <head> Section:
<head>
<title>My Website</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

3. Test Your Favicon

After updating the HTML, refresh the page in your browser to see the favicon in the tab. If it doesn't appear, clear the browser cache or open the site in an incognito window.

Here is the implementation of how to add icon logo in title bar

html
<html>
<head>
    <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

In this code

  • The <link> Tag: In the <head> section, the <link> tag is used to define the favicon. The rel="icon" attribute specifies that the link is a favicon.
  • href Attribute: The href attribute points to the location of the image. In this case, it uses an external URL to the GeeksforGeeks logo.
  • type Attribute: The type="image/x-icon" specifies that the file is an icon, typically in .ico format.

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.


Similar Reads