Favicon | "favorites icon" is a small icon associated with a website that appears in various places, such as the browser tab, bookmarks, and bookmarks bar. It helps users easily identify and distinguish a website visually.
html Favicon
- Create or Choose an Icon :
- Add Favicon to Website :
Start by creating a square icon image with a dimension of at least 16x16 pixels (commonly used size) or higher resolutions like 32x32 or 64x64 pixels.
Save the icon image in a compatible format, such as .ico, .png, or .jpg. The .ico format is the most widely supported for favicons.
Place the favicon file in the root directory of your website or in a specific directory.
Add the following HTML code to the <head> section of your HTML document, between the <head> and </head> tags:
<link rel="icon" href="path/tofoldername/favicon.ico" type="image/x-icon">
Replace "path/tofoldername/favicon.ico" with the actual path to your favicon file. If the favicon is located in the root directory, you can simply use :
<link rel="icon" href="/favicon.ico" type="image/x-icon">
Additionally, you can provide multiple favicon sizes and formats to ensure compatibility across different devices and browsers. Here's an example that includes different sizes and formats:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/path/to/favicon.png" type="image/png" sizes="32x32">
<link rel="icon" href="/path/to/favicon.png" type="image/png" sizes="16x16">
- Save the HTML file and open your website in a browser.
- Check if the favicon appears correctly in the browser tab, bookmarks, or bookmarks bar.
- Clear the browser cache if necessary, as it may retain the previous favicon.
×