Displaying a Favicon in HTML

by

A favicon is a small icon associated with a website or web page. It appears in the browser’s address bar or tab. To display a favicon on your website, you’ll need to create an image file (usually in .ico format) and link it to your HTML document using the <link> tag within the <head> section.

Here’s a basic example:

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    </body>
</html>

Explanation:

  1. Create the Favicon:
    • Design a small square image (usually 16×16 pixels) in .ico format. You can use online tools or image editing software to create this.
    • Save the image file as favicon.ico in the root directory of your website.
  2. Add the <link> Tag:
    • In the <head> section of your HTML document, add the following <link> tag:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  • rel=”shortcut icon”: Specifies the relationship between the current document and the linked resource.
  • href=”favicon.ico”: Specifies the URL of the favicon file.
  • type=”image/x-icon”: Specifies the MIME type of the favicon.

Additional Tips:

  • Multiple Favicon Sizes: For better compatibility across different devices and browsers, you might want to provide multiple favicon sizes. You can use a favicon generator tool to create different sizes and automatically generate the necessary HTML code.
  • Browser Compatibility: While the .ico format is widely supported, some browsers may prefer other formats like .png. You can provide multiple formats using the <link> tag with different rel attributes:
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">

Testing: To see how your favicon appears, open your website in different browsers and devices. You may need to clear your browser cache to see the updated favicon.