Customize icon and Favorites icons for your website

There are two ways to customize the site Favorites icon:

The first method:
The first step, of course, is to prepare an icon that reflects the style and personality of your homepage. The easier way to do this is to make an icon of your website's logo, in addition to downloading it.
The second step is to name the icon file: Favicon.ico.
The third step is to upload the favicon.ico to the root of the server where your site resides. You do not need to make any changes to your Web page files, Internet Explorer 5 will automatically search the root of your site, once it discovers Favicon. ICO This file will display the icon in the visitor's address bar and Favorites list.
Using this method to customize the collection icon, there is a clear flaw, is that the collection icon can only be displayed in the homepage of the site.

The second method:
The first step is to prepare an icon that reflects the style and personality of your home page.
The second step is to name the icon file as an arbitrary file name, such as Myicon.ico.
In the third step, add the following to the head section of the Web page file:
　<link rel= "shortcut icon" href= "Http://www.mysite.com/myicon.ico" type= "Image/x-icon" >.
Note: The path to the icon file must use an absolute path.
This way you can make all the pages display the Favorites icon.
Finally, one more thing to note is that Some Web site host servers (such as: Geocities) do not support the icon file format (. ico), and you need to contact your system administrator to open support for the icon file format, but you can also use the Type property to define the type of the picture, such as: Type= "image/ X-icon "" Image/png "" Image/gif "

The link rel= "icon" can be used to achieve the animation icon effect of some browsers

Statement one: <link rel= "shortcut icon" href= "Favicon.ico"/>
Statement two <link rel= "icon" href= "Animated_favicon.gif" type= "Image/gif"/>

The Favicon feature was first created by Microsoft, while Microsoft's Internet Explorer Web browser would request favicon for every website. The Microsoft-supported link tag does not conform to the HTML recommendations of World Wide Web Consortium (Website consortium) [1] because:

The Rel attribute must contain a list of link types delimited by spaces, so a link type containing two words cannot be understood by a standard browser.
The ". ico" file type (a raster format for Microsoft Windows) does not have a registered MIME type, and it does not seem to be understood by most browsers at that time. However, for 2003 years, this format was registered in the IANA and its MIME type was image/vnd.microsoft.icon, thus eliminating the first part of the problem.
The use of a reserved address on the website (reserved location) contradicts architecture of the world Wide Web (the structure of the Internet) and is considered link squatting (link hijacking) or URI Squatting (URI hijacking).

Mozilla Browser adds support for Favicon through a web-compliant approach. It uses rel= "icon" and allows the network designer to add any supported image formats to the Favicon. For example <link rel= "icon" type= "Image/png" href= "/path/image.png" >. Since this feature will be used for all new content, most browsers have added support for this feature.

Using the Icon tool (with a lot of) making icon files (Favicon.ico) to the root of the server where the website is located, this file must be an icon file of 16*16 size. Of course, you can also add between <link rel= "shortcut icon" href= "Favicon.ico" type= "Image/x-icon"/>
You can do it. However, the ICO gives a static icon file.

If you want to move, you have to make a GIF animation. GIF animations are also 16*16 and uploaded to the server. Add in between <link rel= "icon" href= "Animated_favicon.gif" type= "Image/gif" >
You can do it.

If you want to change the icon in the collection, then add this sentence:
<link rel= "Bookmark" href= "Favicon.ico"/>
This icon can also be used in PNG format, the PNG format is now very strong momentum.

Reference blog:http://blog.csdn.net/nerdsully/article/details/7389818