Difference Between HTML and ASP

How To Add a Favicon in HTML?

Last Updated : 19 Apr, 2025

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

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

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.

Difference Between HTML and ASP

N

NAYONIKA

Improve

Article Tags :

Similar Reads

Most Commonly Used Tags in HTML

HTML tags are the fundamental building blocks of web development, providing the structure and organization necessary for creating web pages.They include tags for headings, paragraphs, links, images, and more.Commonly used tags like <html>, <head>, and <body> are essential for creat

Difference Between HTML and ASP

HTML and ASP are two very common aspects in the web programming world. HTML stands for HyperText Markup Language used to develop web pages and specifically web design. Primarily written using HTML elements, they consist of tags, an opening, and a closing tag. The data between these tags is usually t

How to create a responsive Modal Sign-Up form for a Website ?

The Sign-Up form for a website is required to be responsive as it helps to easily render the form on different display sizes which make the website compatible with different screen widths. Follow the steps to create a responsive sign up form using CSS.Step 1: Adding HTML Use a "form" element to proc

HTML Responsive full page image using CSS

Responsive Web design (RWD), is a design strategy developed to cope with the amazing popularity of mobile devices for viewing the Web. Responsive images are an important component of responsive Web design (RWD),Â Responsive web design is a new approach to website design that ensures users have a good

Creating A Range Slider in HTML using JavaScript

Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows one to choose the value from a range which is represented as a slider. A Range slider is typically represented using a slid

getAttribute() - Passing data from Server to JSP

Suppose some data at the Server side has been created and now in order to pass that information in a JSP page, there is a need of request.getAttribute() method. This, in fact differentiates the getAttribute() and getParameter() methods. The latter is used to pass Client side data to a JSP. Implement

How to align Placeholder Text in HTML ?

The placeholder attribute specifies a short hint that describes the expected value of an input field/text area. The short hint is displayed in the field before the user enters a value. In most of the browsers, placeholder texts are usually aligned on the left. The selector uses the text-align proper

Convert an Image into Grayscale Image using HTML/CSS

A grayscale image is an image that displays only shades of gray, without any color, representing varying levels of light intensity. You can easily convert an image to grayscale in HTML/CSS by applying the filter: grayscale(100%) property to desaturate the colors.The grayscale() filter in CSS can tak

Hide elements in HTML using display property

Hiding elements in HTML is a common technique used to control the visibility of content on a webpage. This approach allows developers to dynamically show or conceal elements based on user interactions, the display property involves setting display: none in CSS. This completely removes the element fr

JavaScript Form Validation

JavaScript form validation checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.What we are going to CreateIn this article, we will guide you through creating a form validation application. This application will validate essentia