There are two methods to display logo (popularly known as ‘favicon’) in browser’s address bar. First is with rel=”icon” and second is with rel=”shortcut icon”. At the beginning it would confusing which ‘rel’ should be apply. Here you will find the difference in both the methods and which one need to use.

Method 1

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

Method 2

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

You should first consider the cross-browser issue. The first method works in IE only. If we use both methods that will also works in IE only. To overcome this, use second method only:

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

so that your logo will display in IE, Firefox as well. For Webkit based browser (like Safari, iPad, iPhone, iTouch) you will need to add anotherĀ  line:

<link href='favicon.ico' rel='apple-touch-icon' />

You can also use animated gif icon as favicon:

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