• Register
100 points
3

In, this article we will learn how to add icon logo in html title bar before we start we should learn about title and logo/icon.in this article we will also discuss approach and code.


What is the title?

The HTML Title is an element of HTML which we define as this <title> and the <title> defines the title of the document that is shown in the browser’s title bar or we can say page’s tab.

What is Icon?

You may see that most of the websites have their own logo for their websites which we can see just on the left side of the title in the title bar or page’s tab.The logo which we can see in the form of images and icon.another name of logo is favicon. fevicons are  being good for the SEO of the websites. We use the link attribute to add the favicon.


Approach

For adding the icon in HTML we  have to code a syntax in the HTML code that syntax is

<link rel="icon" href="icon_path" type="image/icon type">
First, we have to save and generate icon file in our website and root directory or image under the name that is favicon then copy that tag which is already mentioned above and pass it by making no changes in between <head> opening and </head> closing tag.

Program

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset = "utf-8" /> 
          
        <title> 
            website icon 
        </title> 
          
        <!-- add icon link -->
        <link rel = "icon" href =  
"https://i.pinimg.com/originals/00/50/71/005071cbf1fdd17673607ecd7b7e88f6.png" 
        type = "image/x-icon"> 
          
    </head> 
      
    <body> 
        <h1 style = "color: blue;"> 
            website 
        </h1> 
          
        <p> 
            website icon added in the title bar <br> icon looks like this <br><img src="https://i.pinimg.com/originals/00/50/71/005071cbf1fdd17673607ecd7b7e88f6.png" height="150px" width="150px">
        </p> 
    </body> 
</html>

output

image

hope this will help.

100 points
3