Last Updated: February 25, 2016

Set favicon in cross browser and more...

We have seen most of the site has favicon which describe the additional information about the site , Addition in the scene it could be logo,company Profile, company production,web site application, and so many .

now how can u do this ?
its very simple to do , just u need to add some line's of code and be ready with small icon image, u can also add animated image in fevicon

add this part in between <head> </head> Section. Please try to use relative icon type like type="image/ico" for .ico image.

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

now some time this code will not work on most of the Browser like IE old version
in this case u can add this line

<link rel="shortcut icon" href="images/favicon.ico" type="image/vnd.microsoft.icon" *gt;

we can use this also for IE:

<!--[if IE]>
<link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<![endif]-->

Finally ConvertICO can help to convert png image to ico image.

Standard size of favicon: 16x16 is the better size for favicon to show in major browsers. Here is a better read about creating a favicon and more : http://www.netmagazine.com/features/create-perfect-favicon

Hope this will help the beginners who just started their journey in web development.

Happy's coding :)

#cross browser

#favicon

#html