How to add Image in Title bar in HTML?

The majority of websites add an icon or image logo in the title bar. The icon logo is also called a favicon.

Favicon, which is also known as a URL icon, a tab icon, a shortcut icon, website icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page. Favicon is used in the top left corner of the tab. Favicons are attractive and can be useful for user engagement.

Syntax:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

A favicon must have the following characteristics:

Favicon.ico is the default name.
Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
Color should be 8 bites, 24 bites or 32 bites.

Depending on the favicon format, the type attribute must be changed:

For PNG, use image/png.
For GIF, use image/gif.
For JPEG, use image/gif.
For ICO, use image/x-icon.
For SVG, use image/svg+xml.

Code:

<!DOCTYPE html> 
<html>
  <head>
    <title>The Tech Platform</title>
    <link rel="shortcut icon" href="https://static.wixstatic.com/media/0f65e1_92686f2a2df7486c86a53fe040820b25~mv2.png">
  </head>
  <body>
    <h1 style="color: blue;"> 
      Title bar icon 
    </h1>
    <p> 
      The Tech Platform logo added in the title bar
    </p>
  </body>
</html>