Apple-touch-icon can see that this is an icon file similar to the website Favicon, used to create shortcuts on iphone and ipod.
This file should be in PNG format, 57x57 pixel size, placed under the site root directory.
If the prepared file is not 57x57, it will scale itself.
In the head section of the page, it is represented in the following format.
<link rel= "Apple-touch-icon" href= "/apple-touch-icon.png"/>
Statement one: <link rel= "shortcut icon" href= "Favicon.ico"/>
Statement two <link rel= "icon" href= "Animated_favicon.gif" type= "Image/gif"/>
Note: statement a Shortcut icon is the icon that appears in front of the URL column
Question: Statement Two what is the role of icon? What's the difference between a statement?
Guide
In the past, web designers and developers used a variety of methods to ensure that Favicon appeared. It is hard to make sure that Favicon can be displayed on all computers, even in a browser of the same version.
Another limitation of the following code is that it associates favicon with a particular 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.
We recommend that you include the following two lines of HTML code:
CO
DE:
<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 standards-compliant browsers as a list of possible keywords ("shortcut" will be ignored and "icon" only), while the Internet The Explorer will use it as a separate name ("shortcut icon"). The result of this is that all browsers can understand this code. Adding a second row is necessary only if you want to provide another alternate image for the new browser, such as an animated GIF.
In HTML, the link element must be in the head element (between
For Xhtml,link, you must use "/>" to End (or "></link>"), and you cannot end with ">".
The href can, but does not, point to the location of the/favicon.ico. It can point to any URL.
Images can often use any image format that is 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 may also use Image/x-icon for compatibility reasons.) However, it is best to use the IANA registered MIME type because most mainstream browsers now support it)
GIF file Image/gif
PNG file Image/png
Use the appropriate resolution and color depth.
ICO: Includes multiple resolutions (most commonly used for 16x16 and 32x32,mac OS x sometimes using 64x64 and 128x128) and bit depth (bits per pixel) (most use 4, 8, and 16 million BPP, i.e. 16, 256, and colors).
GIF: Use 16x16,256 color.
PNG: Use 16x16,256 color or 24-bit.
Note:When Favicon.ico is placed at the root of the document, 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 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.
Apple-touch-icon,shortcut the difference between icon and icon (mobile phone station sent to phone desktop icon customization)
