Statement 1: <LINK rel = "shortcut icon" href = "favicon. ICO"/>
Statement 2 <LINK rel = "icon" href = "animated_favicon.gif" type = "image/GIF"/>
Note: Statement 1 'shortcut icon 'is the icon that appears before the URL column.
Q: What is the role of Statement 2 icon? What is the difference with statement 1?
Guidance
In the past, to ensure the appearance of favicon, website designers and developers used a variety of methods. It is difficult to explicitly ensure that favicon can be displayed on all computers, even a browser of the same version.
Another limitation of the following code is that it associates favicon with a specific HTML or XHTML document. To avoid this, the favicon. ICO file should be placed under the root directory. Most browsers will automatically detect and use it.
We recommend that you include the following two lines of HTML code:
Code:
<LINK rel = "shortcut icon" href = "http://example.com/favicon.ico" type = "image/vnd. Microsoft. Icon">
<LINK rel = "icon" href = "http://example.com/favicon.ico" type = "image/vnd. Microsoft. Icon">
However, only the first line is required, because the "shortcut icon" string will be identified by most compliant browsers as listing possible keywords ("shortcut" will be ignored, "icon" only applies. Internet Explorer uses it as a separate name ("shortcut icon "). The result is that all browsers can understand the code. It is necessary to add the second line only when you want to provide another backup image (such as animated GIF) for the new browser.
In HTML, the link element must be in the head element (between For XHTML, link must end with "/>" (or "> </link>") instead of ">.
Href is acceptable, but does not need to point to/favicon. ICO. It can point to any URL.
Images can usually use any image format supported by browsers.
The. ICO file format can be read by all browsers that can display favicon.
Set the server to send the correct mime ID:
ICO file image/vnd. Microsoft. Icon (or you can also use image/X-icon for compatibility reasons. However, it is best to use the MIME type registered by IANA, because most mainstream browsers now support it)
GIF file image/GIF
PNG file image/PNG
Use appropriate resolution and color depth.
ICO: includes multiple resolutions (most commonly used 16x16 and 32x32, Mac OS X sometimes uses 64x64 and 128x128) and bit depth (bit per pixel) (most use 4, 8, 24 bpp, that is, 16, 256 and 16 million colors ).
GIF: use 16x16,256 colors.
PNG: use 16*16,256 colors or 24 bits.
Note: When favicon. ICO is placed in the document root directory, it will be found by browsers that do not process link components, even if there is no link to it on your site.
Standardization
The favicon function was first created by Microsoft, and Microsoft's Internet Explorer Web browser requests favicon for every website. The link tag supported by Microsoft does not comply with the HTML recommendation of World Wide Web Consortium (W3C, World Wide Web Alliance) [1] because:
The rel attribute must contain a list of link types separated by spaces. Therefore, a link type containing two words cannot be understood by the standard browser.
The ". ICO" file type (a grating format used for Microsoft Windows) does not have a registered MIME type and does not seem to be understood by most browsers at the time. However, in 2003, the format was registered in IANA and Its MIME type was image/vnd. Microsoft. Icon, which eliminated the first part of the problem.
The use of reserved location on the website conflicts with the architecture of the World Wide Web (Internet structure) and is considered as link squatting (link hijacking) or URI squatting (URI hijacking ).
The Mozilla Browser adds favicon support by following web standards. It uses rel = "icon" and allows network designers to add favicon in any supported image format. For example, <LINK rel = "icon" type = "image/PNG" href = "/path/image.png">. Since this function will be used for all new content, most browsers have added support for this function.
Differences between shortcut icon and Icon code
