HTML Favicon is a small icon that appears in the browser tab or bookmark bar of a website. It is also known as a shortcut icon, website icon, or bookmark icon. Favicon is a combination of two words, "favorite" and "icon".
The purpose of a favicon is to provide a visual representation of a website and make it easy for users to identify and locate the website among their bookmarks or open tabs. It also adds a professional touch to the website and enhances its branding.
The favicon is usually a 16x16 pixel image in ICO format, but it can also be a PNG, GIF, or JPEG image. The image should be saved as "favicon.ico" and placed in the root directory of the website. The browser automatically detects the favicon and displays it in the appropriate location.
To add a favicon to your website, you can use the following HTML code:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
The "link" tag is used to define a relationship between the document and an external resource, in this case, the favicon. The "rel" attribute specifies the relationship type, which is "shortcut icon" for a favicon. The "href" attribute specifies the URL of the favicon, which should be relative to the root directory of the website. The "type" attribute specifies the MIME type of the favicon, which is "image/x-icon" for an ICO file.
You can also use a PNG, GIF, or JPEG image as a favicon by changing the file extension and MIME type accordingly. For example:
<link rel="shortcut icon" href="favicon.png" type="image/png">
It is recommended to use a transparent background for the favicon to blend in with the browser theme and avoid a white or black border around the image. You can use a graphics editor such as Photoshop or GIMP to create a favicon with a transparent background.
Some browsers also support a larger favicon size of 32x32 pixels, which is displayed in the browser address bar and the taskbar when the website is pinned. To add a 32x32 favicon, you can use the following HTML code:
<link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
The "sizes" attribute specifies the dimensions of the favicon in pixels, separated by the letter "x". The "icon" relationship type is used instead of "shortcut icon" to indicate a larger favicon size.
Overall, HTML Favicon is a simple yet effective way to enhance the branding and user experience of a website. By adding a small icon to the browser tab or bookmark bar, you can make your website stand out and be easily recognizable among other websites.