Statement 1:<link rel=shortcut icon href=favicon.ico />
Statement 2<link rel=icon href=animated_favicon.gif type=image/gif />
Note: The statement Shortcut Icon is the Icon that appears in front of the URL column.
Question: What is the function of statement 2 icon? What is the difference between statement 1?
guide
In the past, website designers and developers have adopted a variety of methods to ensure the emergence of favicon. It is difficult to explicitly ensure that favicon can be displayed on all computers, even with the same version of one browser.
Another limitation of the following code is that it associates favicon to a specific HTML or XHTML document. To avoid this, the favicon.ico file should be placed in the root directory. Most browsers will automatically detect and use it.
It is recommended to 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 necessary because the shortcut icon string will be recognized by most standard-compliant browsers as listing possible keywords (shortcut will be ignored, and only icons will apply); and Internet Explorer will use it as a separate name (shortcut icon). The result of this is that all browsers can understand this code. It is only necessary to add a second line if you want to provide another alternate image (such as an animated GIF) for the new browser.
In HTML, the link element must be in the head element (between <head> and </head>).
For XHTML, link must use end (or >/link>), and cannot use end.
href can, but not, pointing to the location of /favicon.ico. It can point to any URL.
Images can usually use any image format supported by the browser.
The .ico file format can usually be read by all browsers that can display favicon.
Set up the server to send the correct MIME ID:
ICO file image/vnd.microsoft.icon (or image/x-icon can also be used for compatibility reasons. However, it is better to use the IANA-registered MIME type, as 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 are 16×16 and 32×32, Mac OS X sometimes uses 64×64 and 128×128) and bit depth (bits per pixel) (mostly use 4, 8, 24 bpp, i.e. 16, 256 and 16 million colors).
GIF: Use 16×16, 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 some browsers that do not process the link element, 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 will request favicon for every website. Microsoft-supported link tags do not comply with the HTML recommendations of World Wide Web Consortium (W3C, World Wide Web Consortium) because:
The rel attribute must contain a list of link types that use spaces as delimiters, so a link type containing two words cannot be understood by standard browsers.
The .ico file type (a raster format for icons on Microsoft Windows) does not have a registered MIME type, and it seems that it cannot be understood by most browsers at the time. However, in 2003, this format was registered with IANA, and its MIME type is image/vnd.microsoft.icon, thus eliminating the first part of this problem.
The use of reserved location on the website contradicts the Architecture of the World Wide Web, and is also considered to be link squatting or URI squatting.
Mozilla browser adds support for favicon through a method that complies with web standards. It takes rel=icon and allows web designers to add favicon in any supported image format. For example <link rel=icon type=image/png href=/path/image.png>. Later, given that this feature will be used for all new content, most browsers have added support for this feature.