1. Snippets
  2. ›
  3. HTML
  4. ›
  5. How to Add Image in the Title Bar

How to Add Image in the Title Bar

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.

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

The two ways of adding favicons are presented below.

Watch a video course   CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

The first way of adding favicons

  • The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
  • You must convert your image into the .ico format. There are many online tools to do that.
  • Opening the tool, you must upload your image file. Then, the image will be converted automatically.
  • Download the image and save your .ico file on the computer.
  • Rename the file to favicon.ico, because the browser automatically recognizes only this name.
  • Upload the 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 display the image in the browser.

The second way of adding favicons

  • The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
  • Upload the file to the host directory, where your website files are located.
  • The final step is to specify the image you want to use as a favicon in the code of your website.
<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 of adding an image in the title bar:

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

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 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.
<link rel="icon" href="favicon.gif" type="image/gif">

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

Platform Name Rel value Favicon size
Google TV favicon.png icon 96×96
Opera Coast favicon-coast.png icon 228×228
Ipad Retina, iOS 7 or later apple-touch-icon-152×152-precomposed.png apple-touch-icon-precomposed 152×152
Ipad Retina, iOS 6 or later apple-touch-icon-144×144-precomposed.png apple-touch-icon-precomposed 144×144
Ipad Min, first generation iOS 7 or later apple-touch-icon-76×76-precomposed.png apple-touch-icon-precomposed 76×76
Ipad Mini,first generation iOS 6 or previous apple-touch-icon-72×72-precomposed.png apple-touch-icon-precomposed 72×72
Iphone Retina, iOS 7 or later apple-touch-icon-120×120-precomposed.png apple-touch-icon-precomposed 120×120
Iphone Retina, iOS 6 or previous apple-touch-icon-114×114-precomposed.png apple-touch-icon-precomposed 114×114

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 of Safari. For different platforms, add the link in the head section of documents.

Add it to you code in the following way:

<!-- 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">

Related Resources

Do you find this helpful?

Related articles