May 21, 20221 min read

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>