HTML Favicon
A favicon is a small icon associated with a website or a web page. It appears in the browser's address bar, on browser tabs, and in bookmarks. A favicon can help users quickly identify your website among multiple tabs or bookmarks. The HTML tag is used to link the favicon icon to your web page.
Usage of HTML Favicon
To add a favicon to your web page, you need to create a small image file (usually 16x16 pixels or 32x32 pixels) in one of the supported file formats (such as PNG, GIF, or ICO). Once you have the image file, you can add the following HTML code in the section of your web page:
1<link rel="icon" type="image/png" href="favicon.png">
In the code above, the rel attribute specifies the relationship between the current document and the linked document, which in this case is a favicon. The type attribute specifies the MIME type of the linked document, which in this case is image/png. The href attribute specifies the URL of the linked document, which in this case is the file path to the favicon image.
Example of HTML Favicon
Let's say you have a favicon image called favicon.png in the root directory of your website. Here's how you can link it to your web page:
1<!DOCTYPE html> 2<html> 3<head> 4 <title>My Website</title> 5 <link rel="icon" type="image/png" href="favicon.png"> 6</head> 7<body> 8 <!-- content of the web page goes here --> 9</body> 10</html>
When you open this web page in a browser, you will see the favicon image in the address bar and on the browser tab, as shown in the image below.
That's how you can add a favicon to your web page using HTML. Keep in mind that the HTML tag supports several other attributes, such as sizes and media, that you can use to provide different versions of the favicon for different devices and display resolutions.
Note: It's recommended to use a favicon with a transparent background to avoid any issues with different color backgrounds in different devices.
If you want to create and customize your favicon image, you can use a free online tool like Favicon.io or a graphic design software like Adobe Photoshop.
It's important to have a favicon for your website, as it can make your website look more professional and memorable.