html

How to add favicon to the web page | Explained

The favicon is the graphical image that is displayed with the title of the web page. Apart from the title, it is also disabled in the history, in the bookmarks, browsers tab. Therefore, the favicon may also be referred to as the website’s icon, bookmark icon. The favicon is usually created in .ico file format that is supported by all the famous browsers. However, several browsers tend to support .svg, .png, .gif and .png format for favicon.

Keeping in view the importance of the favicon, this article provides the following learning outcome:

– the purpose of the favicon

– adding a favicon to your webpage

Properties of a favicon

As stated earlier, the favicon is used to add a graphical icon with your title name. The favicon depends on the following properties:

Image format: The image format is the key ingredient in making the favicon. The supported formats are, .ico, .svg, .png, .jpg, and .gif. Most of the well-known browsers such as Chrome, Firefox, Opera, Microsoft Edge, and Safari, support all these formats. However, the latest versions of Internet Explorer do support these formats.

Image Size: The size of the icon varies from purpose to purpose. Some of the most used sizes are stated below:

– 16×16(pixels) is recommended for browser icon

– 32×32(pixels) for the shortcut icon

– 96×96(pixels) for the desktop shortcut icon

How to add the favicon to a web page

The favicon can be added to the HTML page using the <link> tag supported by the HTML. For better understanding, we have provided a step-by-step procedure to add a favicon to your web page.

Before getting into steps, make sure you have placed the favicon image in the root directory of your webpage. Moreover, it is also recommended to use the correct size as per the usage of the favicon.

Step 1: Open the HTML code of your webpage and navigate to the <head> tag

Step 2: Add the <link> tag inside <head> tag with the href property directing towards the location of your favicon. The HTML code provided below refers to using the <link> tag to add a favicon:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> LinuxHint </title>

    <link rel="LinuxHint logo" href="file:///C:/Users/adnan/Downloads/abc.jpg">

</head>

<body style="background-color: skyblue;">

    <h1>Welcome to LinuxHint</h1>

</body>

</html>

The image of the code is shown here:

Graphical user interface, text Description automatically generated with medium confidence

Step 3: Once the tag is placed successfully, save the code and reload your web page. As the page is reloaded, the icon would be placed with the name of the title as can be seen in the image below:

Here you go!

By following the above-mentioned three steps, you would have learned to add the favicon to your webpage

Conclusion

The favicon is the graphical image displayed with the title of the webpage. Several other locations also allow the favicon to be displayed with the title of the page. For instance, you would find the favicon in the bookmarks, history, where the title of the page is shown. This article provides the essential steps to add a favicon to your webpage. Moreover, the properties contained by favicon are also described,

 

About the author

Adnan Shabbir