• I know it is a new term for all the most of the people as it is not must used by all the people.

  • It is a small icon that is at the top of the website, which can be changed by us.


Here, the icon of the hash node will be a favicon.

How do I create a favicon in HTML?

  • Step 1: Create a small square image (e.g., 16×16 pixels or 32×32 pixels) to serve as your favicon. Save it in a suitable format like PNG, GIF, or ICO.

  • Step 2: Save the image with a suitable filename, such as “favicon.png” or "favicon.ico”.

  • Step 3: Upload the favicon image to your website’s server or hosting directory.

  • Step 4: In the <head> section of your HTML document, add the following code:

<link rel="icon" type="image/png" href="path-to-favicon">

How do I add a favicon to a website or web page?

In this approach, add a <link> tag with rel="icon” to the <head> section with the href attribute pointing to the favicon image.


<link rel="icon" type="image/png" href="path-to-favicon">

Let's learn it with an example:

<!DOCTYPE html> 
    <meta charset="utf-8" /> 
    <title>HTML Favicon</title> 
    <!-- Add icon link -->
    <link rel="icon" href= 
    <h1 style="color:black;"> 
        Jalaj Singhal
        Welcome to my website 


  • Here I have added a photo to the top where the site name comes as a representation, which we can add directly from the link or the storage itself.

A list of the sizes of favicons as per the device used is as follows:

favicon-32.png32×32Standard for most desktop browsers.
favicon-57.png57×57Standard iOS home screen.
favicon-76.png76×76iPad home screen icon.
favicon-96.png96×96Google TV icon.
favicon-120.png120×120iPhone retina touch icon.
favicon-128.png128×128Chrome Web Store icon & Small Windows 8 Star Screen Icon*.
favicon-144.png144×144Internet Explorer 10 Metro tile for pinned site*
favicon-152.png152×152iPad touch icon.
favicon-167.png167×167iPad Retina touch icon (change for iOS 10: up from 152×152, not in action). iOS 10 will use 152×152).
favicon-180.png180×180iPhone 6 plus
favicon-192.png192×192Google Developer Web App Manifest Recommendation
favicon-195.png195×195Opera Speed Dial icon
favicon-196.png196×196Chrome for Android home screen icon
favicon-228.png228×228Opera Coast icon

With this I want to tell you that we have successfully completed most of the HTML and remaining HTML we will discuss in the upcoming blogs where we would feel need of them.

Did you find this article valuable?

Support Jalaj Singhal by becoming a sponsor. Any amount is appreciated!