start learning
Image 1

html Favicon

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.


  1. 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.
  2. 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">
3. Verify Favicon: