HTML

HTML

📌 HTML Favicon

What Is a Favicon ?

A favicon (favorite icon) is the small icon that appears next to the page title in the browser tab. In short, it works like a mini logo of your website and helps users quickly recognize your site when multiple tabs are open.

For best results, you should use a simple, clear, and high-contrast image when designing a favicon.

How to Add a Favicon in HTML

1. Prepare and place the favicon file

  • You can place the file in the root directory of your website
  • Or store it in a folder like /images
  • The most common file name is : favicon.ico

2. Add it inside the <head> section

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>My Page Title</title>
        <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

Explanation :

  • rel="icon" → Specifies that the page uses a favicon
  • type="image/x-icon" → Defines the file type
  • href → Specifies the path to the favicon file
  • The <link> tag is usually placed after the <title> tag

3. Refresh the page

Browsers often cache favicons. If you don’t see the changes :

  • Do a hard refresh (Ctrl + F5)
  • Clear your browser cache if necessary

Supported Favicon Formats

Most modern browsers support the following formats :

  • ICO
  • PNG
  • GIF
  • JPEG
  • SVG

So, you are not limited to .ico; formats like PNG or SVG are also commonly used in modern projects.

  • Quick Summary

  • A favicon is the small icon shown in the browser tab
  • It is added using the <link rel="icon"> tag in HTML
  • Multiple image formats are supported
  • Changes may not appear immediately due to browser caching

Html Image
Html Table