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 :
- 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.
- Add Favicon to Website :
- 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.
×