Favicon in HTML

A favicon (short for "favorite icon") is a small, iconic image that represents your website and is displayed in the browser tab, bookmarks, and address bar.

It helps users easily identify and navigate to your website.


Adding a Favicon in HTML

To add a favicon to your website, you need to follow these steps:

  1. Create a Favicon Image: Favicons are usually square images and are typically saved as .ico files, though modern browsers also support .png, .jpg, and other formats.
  2. Add the Favicon to Your Website's Root Directory: Place the favicon file in the root directory of your website or in an appropriate folder.
  3. Link the Favicon in Your HTML: Use the <link> tag within the <head> section of your HTML document to specify the location of the favicon file.


How to add to website

Here’s a detailed example of how to add a favicon to your HTML page:

  1. Create a Favicon Image
  2. Let's assume you have created a favicon image named favicon.ico.
  3. Place the Favicon in the Root Directory
  4. Place the favicon.ico file in the root directory of your website. Alternatively, you can place it in a specific folder, such as /images.
  5. Link the Favicon in Your HTML

If the favicon is in the root directory

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>

If the favicon is in a folder (e.g., /images)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
</head>
<body>
    <h1>Welcome to My Website</h1>
</body>
</html>


Additional Considerations

  1. Multiple Sizes and Formats: You can provide multiple favicon sizes and formats for better compatibility across different devices and browsers. 
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.png" type="image/png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" sizes="32x32" href="/favicon-32x32.png" type="image/png">
<link rel="icon" sizes="16x16" href="/favicon-16x16.png" type="image/png">
  2. Check the Favicon: After adding the favicon, clear your browser cache and refresh the page to see the favicon in action.


you can successfully add a favicon to your HTML website, enhancing its professional appearance and making it easily recognizable for users.