Categories
HTML favicon (short for favorite icon) is a small icon displayed in the browser's address bar, tabs, bookmarks, and other places to visually represent a website. Favicon provides a recognizable and distinctive visual identity for a website.
To add a favicon to your HTML document, you need to follow these steps:
-
Create the Favicon Image: Design or obtain an image that you want to use as the favicon. The image should be square and typically has dimensions of 16x16 pixels or 32x32 pixels, although larger sizes can be used for high-resolution displays. Save the favicon image with an appropriate file format such as .ico, .png, or .svg.
-
Place the Favicon Image: Upload the favicon image to the root directory of your website or a specific directory of your choice. Make sure you remember the file path or location of the favicon image.
-
Add the Favicon Link: In the
<head>section of your HTML document, insert the following code using the<link>element:
<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">
Replace "path/to/favicon.ico" with the actual path to your favicon image file. Additionally, you can also specify alternative favicon formats using the <link> element to ensure compatibility across different browsers. For example:
<link rel="icon" href="path/to/favicon.ico" type="image/x-icon">
<link rel="icon" href="path/to/favicon.png" type="image/png">
In the above code, both a .ico and a .png version of the favicon are provided, allowing the browser to choose the appropriate format based on its capabilities.
It's important to note that favicon files should be accessible via a direct URL to ensure proper display in different browsers. After adding the favicon code, save the HTML file and upload it to your website server.
Once the favicon is correctly added to your HTML document, it should be displayed in the browser's address bar, bookmarks, and tabs when users visit your website. The favicon contributes to the branding and recognition of your website among users.