How to add Favicon in HTML?

Hello Coders, In this blog, you will learn to add a favicon in HTML. Favicon is a small logo that is present on the left side of the site title. Some people also say it title logo. You can add any image as Favicon. Let’s start the process:-

Add Favicon

A favicon or title logo looks like this in HTML:-

Site title in HTML

Steps to add a Favicon:-

  1. Open your text editor, and Type all the basic HTML tags.

  2. Type all the Codes that you want to enter in the body.

  3. To add a favicon on the site, We will add code in the head tag.

  4. Copy this code and add it to your Head section. <link rel=”icon” href=”/favicon/img.png”>

  5. Put the link of the image in the href property with its extension. 

  6. You have successfully added Favicon in your website and your HTML code will look like this:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Codeblockx</title>
        <link rel=”icon” href=”/favicon/img.png”>
    </head>
    <body>
        <h1>Codeblockx</h1>
        <h2>Solution of all your coding problems</h2>
        <h3>Adding favicon</h3>
    </body>
</html>

OUTPUT

Favicon in HTML

Hope this blog was helpful to you & Now that you are perfect in applying favicon in websites you should now move ahead and learn about how to apply Responsive Header and Responsive Footer in the website. We have detailed blog on them. They will be definitely helful to you.

Thank you for visiting our blog. If you have any questions related to Coding then let us know in the comments section. We will answer it as soon as possible.

Leave a Comment

Your email address will not be published. Required fields are marked *