How to Add an Image in the Title Bar

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

Favicon, also known as a shortcut icon, website icon, tab icon, URL 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.

Favicon was standardized by W3C in the HTML 4.01 recommendation. The standard implementation uses a link element with a rel attribute in the <head> section of the document that specifies the file format and file name and location. The file can be in any Web site directory and have any image file format(ico, png, jpeg, gif).

You can add favicons in two ways.¶

The image should be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear normally in browsers. Non-square images will also work; however, such icons may not look professional.
You should convert your image to .ico format. There are many online tools to do that.
Opening the tool, you should upload your image file. Then the image will be converted automatically.
Download your image and save your .ico file on your computer.
Rename the file to favicon.ico, because the browser will only recognize this name automatically.
Upload this file to the host directory where your website files are located.
When your favicon.ico file is uploaded the browser will select it automatically and show the image in the browser.

The second way to add favicons is the following:

The image should be square dimensioned in any image format (ico, jpg, bmp, gif, png)so as to appear normally in browsers. Non-square images will also work; however, such icons may not look professional.
Upload this file to the host directory where your website files are located.
The final step is to specify the image you would like to use as a favicon in the code of your website:

Add the following link to your <head> section:

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

If you do not see the new favicon, clear the cache of your browser and restart it.

Example

<!DOCTYPE html> 
<html>
  <head>
    <title>Title of the document</title>
    <link rel="shortcut icon" href="href="/favicon1.ico">
  </head>
  <body>
    <h1 style = "color: #1c98c9;"> 
      W3docs icon 
    </h1>
    <p> 
      W3docs icon added in the title bar
    </p>
  </body>
</html>
Try it Yourself »

Result

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 should 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.

<link rel="icon" href="favicon.gif" type="image/gif">

For different platforms, the favicon size should also be changed:

<table class="table table-bordered table-striped table-header small-font">
  <tbody>
    <tr>
      <th>Platform</th>
      <th>Name</th>
      <th>Rel value</th>
      <th>Favicon size</th>
    </tr>
    <tr>
      <td>Google TV</td>
      <td>favicon.png</td>
      <td>icon</td>
      <td>96×96</td>
    </tr>
    <tr>
      <td>Opera Coast</td>
      <td>favicon-coast.png</td>
      <td>icon</td>
      <td>228×228</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 7 or later</td>
      <td>apple-touch-icon-152×152-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>152×152</td>
    </tr>
    <tr>
      <td>Ipad Retina, iOS 6 or later</td>
      <td>apple-touch-icon-144×144-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>144×144</td>
    </tr>
    <tr>
      <td>Ipad Min, first generation iOS 7 or later</td>
      <td>apple-touch-icon-76×76-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>76×76</td>
    </tr>
    <tr>
      <td>Ipad Mini,first generation iOS 6 or previous</td>
      <td>apple-touch-icon-72×72-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>72×72</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 7 or later</td>
      <td>apple-touch-icon-120×120-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>120×120</td>
    </tr>
    <tr>
      <td>Iphone Retina, iOS 6 or previous</td>
      <td>apple-touch-icon-114×114-precomposed.png</td>
      <td>apple-touch-icon-precomposed</td>
      <td>114×114</td>
    </tr>
  </tbody>
</table>

For Apple devices with the iOS operating system version 1.1.3 or later and for Android devices, you can create a display on their home screens by using the Add to Home Screen button within the share sheet in Safari. For different platforms add the link in the head section of documents.

See how you can add it into your code.

<!-- default favicon -->
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<!-- wideley used favicon -->
<link rel="icon" href="/favicon.png" sizes="32x32" type="image/png">
<!-- for apple mobile devices -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="152x152">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-152x152-precomposed.png" type="image/png" sizes="120x120">
<!-- google tv favicon -->
<link rel="icon" href="/favicon-googletv.png" sizes="96x96" type="image/png">

Do you find this helpful?

Headline