HTML

HTML Favicon

An HTML favicon is a small image that represents a website. It is displayed next to the page title on the left side in the bookmarks, browser tab, and address bar.

<head>
    <!-- Favicon -->
    <link rel="icon" href="#">
</head>

<!-- in href="#", replace '#' with the path of your file-->

Adding Favicon to HTML

Favicon HTML helps identify your website when you are working on multiple tabs. It is also referred to as a favorite icon and is defined with <link> tag with rel = “icon.”

Note: Use a single image with high contrast to give your brand or site an identity.

To add HTML Favicon, follow the steps mentioned below:

Save your favorite image to the root directly of your webpage. Commonly, the saved folder of the favicon image is expressed as “favicon.ico.”
In the <head> section, add <link> tag after <title> element.
To specify the type of linked document, use rel = ”icon.”
Use the “href” HTML attribute to provide the favicon image’s URL.
This step is optional, but if you want to specify the image type, you must set the type attribute.

Save the changes and reload. As soon as the page refreshes, it will show the favicon image.

<html>
<head>
    <!-- Favicon -->
    <link rel="icon" href="#" type="image/png">
</head>
<body>
    <p>This is an example of website favicon.</p>
</body>
</html>

<!-- in href="#", replace '#' with the path of your file-->

Supported Favicon Formats

HTML favicon is supported by all major browsers, including Chrome, Edge, Safari, Firefox, and Opera. We can use the following formats for HTML favicon.

<html>
<head>
    <!-- ICO format -->
    <link rel="icon" href="#" type="image/x-icon">

    <!-- PNG format -->
    <link rel="icon" href="#" type="image/png">

    <!-- GIF format -->
    <link rel="icon" href="#" type="image/gif">

    <!-- JPG format -->
    <link rel="icon" href="#" type="image/jpeg">

    <!-- SVG format -->
    <link rel="icon" href="#" type="image/svg+xml">
</head>
<body>
    <h3>Supported Favicon Formats</h3>
    <p>This page demonstrates the use of different 
    favicon formats supported by browsers.</p>
</body>
</html>

<!-- in href="#", replace '#' with the path of your file-->

HTML favicon is a vulnerable part of webpages that can be easily exploited in phishing attacks on HTTPS pages. To avoid such a situation, only display the favicon in the tab, and beside your web page’s URL, add a security status of the accessibility protocol used to access the website.