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" />
Leave a Reply