How to add any image as a icon in title?

I want to add an image as a favicon in title. The image is 300px and is located in images folder. I want to display the image besides the title.

I tried to do it but it does not display it:

<head>
<title>My title</title>
<link rel="shortcut" href="./images/logo">
</head>

It does not display any logo besides my title how can I add the logo with my title.

Solution

When trying to set a favicon to your page you have to note the following:

your image is of the correct dimensions (300px is too big to be used as a favicon).
to achieve cross-browser support, you'll need different sizes and different link tags.

Usually, one 180x180, one 32x32 and one 16x16 will suffice to cover all browsers and devices.

Code:

<link rel = "apple-touch-icon" sizes = "180x180" href = "images/logo180x180.png">
<link rel = "icon" type = "image/png" sizes = "32x32" href = "images/logo32x32.png">
<link rel = "icon" type = "image/png" sizes = "16x16" href = "images/logo16x16.png">
<link rel = "mask-icon" href = "images/logo.png">
<link rel = "shortcut icon" href = "images/logo.png">

Correct path:

Aside from the above, it seems that you also use an incorrect path to the favicon, which is why it doesn't work at all. Based on what you have said, your structure is the following:

/
- docs
   - index.html
- images
   - logo.png

With respect to the above structure, the correct relative path you have to use in your html file in order to get the favicon is ../images/logo.png.