Favicon Related Settings page and phone, tablet

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

Most websites define a favicon in this way. But shortcut is not a member of the HTML5-defined link types. In fact, shortcut belongs to ie. If you do not consider IE directly with rel= "icon" can be.

If you omit the value from shortcut in the Rel attribute, IE =8 ignores the declaration and then looks for the Favicon.ico file in the root directory. In fact, most browsers do this without the Rel declaration. If the use of rel= "icon shortcut" in IE is also invalid, because IE does not consider the Rel attribute as a space-separated list.

IE9 do not need shortcut, as long as the provisions type= "Image/x-icon" can be.

Be sure to place a favicon on the root of your website and name it favicon.ico.

Most browsers will automatically search for/favicon.ico by default.

This also means that you can omit the above line of command directly. The only difference is that by omitting this line of command, the browser loads all the files and then loads the favicon, but if there is an explicit definition, the browser will load it when it resolves to the link rel= "icon" declaration. ( still not very clear?) Try it tomorrow )

Update: HTML now specifies an explicit declaration of/favicon.ico

But omitting explicit declarations, for files obtained from HTTP or HTTPS, the user agent might try to get an absolute path using the parse Url/favicon.ico, as if it were an icon.

Update: Due to historical reasons, HTML admits shortcut, just behind to directly with u+0020 space and icon.

Updated, IE11 supports GIF or PNG favicon. Of course/favicon.ico is still the default.

Original: Https://mathiasbynens.be/notes/rel-shortcut-icon

Everything you need to know about touch icons:

Set the Favicon in mobile device and tablets:

<link rel= "Apple-touch-icon" href= "Apple-touch-icon.png" >

Chrome v31+ for Android does support this syntax, using the following method

<link rel= "icon" sizes= "196x196" href= "Apple-touch-icon.png" >

In addition, iOS will automatically add some special effects, starting from Ios2 can control without adding effects

<link rel= "apple-touch-icon-precomposed" href= "Apple-touch-icon-precomposed.png" >

Starting from iOS7, no more effects are added automatically, so you don't have to precomposed

Different icon sizes

• One, measures 76x76 pixels for ipad and ipad Mini models with a 1xdisplay;
• One, measures 120x120 pixels for iphone 4s, iphone 5, iphone 6 (which has a 2xdisplay);
• One, measures 152x152 pixels for ipad and ipad Mini models with a 2xdisplay;
• One, measures 180x180 pixels for IPhone 6 Plus (which have a 3xdisplay).

The perfect solution is to create a high-resolution icon that is used by all devices, as Apple does.

Starting with ios4.2, you can specify different icons for different device resolutions:

<!--for Non-retina (@1xdisplay) IPhone, IPod Touch, and Android 2.1+ devices:--><link rel= "APPLE-TOUCH-ICON-PR Ecomposed "href=" apple-touch-icon-precomposed.png "><!--57x57px--><!--for the IPad Mini and the First-and s Econd-generation IPad (@1xdisplay) on ios≤6:--><link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "app Le-touch-icon-72x72-precomposed.png "><!--for the ipad Mini and the First-and second-generation ipad (@1xdisplay) On ios≥7:--><link rel= "apple-touch-icon-precomposed" sizes= "76x76" href= " Apple-touch-icon-76x76-precomposed.png "><!--for IPhone with @2xdisplay running ios≤6:--><link rel=" apple -touch-icon-precomposed "sizes=" 114x114 "href=" Apple-touch-icon-114x114-precomposed.png "><!--for IPhone with @2xdisplay running ios≥7:--><link rel= "apple-touch-icon-precomposed" sizes= "120x120" href= " Apple-touch-icon-120x120-precomposed.png "><!--for IPad with @2xdisplay running ios≤6:--><link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= " Apple-touch-icon-144x144-precomposed.png "><!--for IPad with @2xdisplay running ios≥7:--><link rel=" apple -touch-icon-precomposed "sizes=" 152x152 "href=" Apple-touch-icon-152x152-precomposed.png "><!--for IPhone 6 Plus with @3xdisplay:--><link rel= "apple-touch-icon-precomposed" sizes= "180x180" href= " Apple-touch-icon-180x180-precomposed.png "><!--for Chrome for Android:--><link rel=" icon "sizes=" 192x192 "href=" > "Touch-icon-192x192.png"

The corresponding rules are as follows:

1. If there is no suitable size, use the minimum value of the inside which is larger than the recommended size

2. If there is no larger than the recommended size, use the maximum size

3. If multiple icons are compliant, use the precomposed keyword

The simplified version is as follows

<link rel= "apple-touch-icon-precomposed" href= "apple-touch-icon-precomposed.png" ><!--57x57px-->< Link rel= "apple-touch-icon-precomposed" href= "apple-touch-icon-72x72-precomposed.png" ><link rel= " Apple-touch-icon-precomposed "href=" apple-touch-icon-76x76-precomposed.png "><link rel=" Apple-touch-icon-precomposed "href=" apple-touch-icon-114x114-precomposed.png "><link rel=" Apple-touch-icon-precomposed "href=" apple-touch-icon-120x120-precomposed.png "><link rel=" Apple-touch-icon-precomposed "href=" apple-touch-icon-144x144-precomposed.png "><link rel=" Apple-touch-icon-precomposed "href=" apple-touch-icon-152x152-precomposed.png "><link rel=" Apple-touch-icon-precomposed "href=" Apple-touch-icon-180x180-precomposed.png ">

In these systems, only the last value in the file is used, so it is recommended to write

<!--for Chrome to Android:--><link rel= "icon" sizes= "192x192" href= "Touch-icon-192x192.png" ><!--for IPhone 6 Plus with @3xdisplay:--><link rel= "apple-touch-icon-precomposed" sizes= "180x180" href= " Apple-touch-icon-180x180-precomposed.png "><!--for IPad with @2xdisplay running ios≥7:--><link rel=" apple -touch-icon-precomposed "sizes=" 152x152 "href=" Apple-touch-icon-152x152-precomposed.png "><!--for IPad with @2 Xdisplay running ios≤6:--><link rel= "apple-touch-icon-precomposed" sizes= "144x144" href= " Apple-touch-icon-144x144-precomposed.png "><!--for IPhone with @2xdisplay running ios≥7:--><link rel=" app Le-touch-icon-precomposed "sizes=" 120x120 "href=" Apple-touch-icon-120x120-precomposed.png "><!--for IPhone With @2xdisplay running ios≤6:--><link rel= "apple-touch-icon-precomposed" sizes= "114x114" href= " Apple-touch-icon-114x114-precomposed.png "><!--for the IPad Mini and the First-and Second-geneRation IPad (@1xdisplay) on ios≥7:--><link rel= "apple-touch-icon-precomposed" sizes= "76x76" href= "apple-touch-i Con-76x76-precomposed.png "><!--for the ipad Mini and the First-and second-generation ipad (@1xdisplay) on ios≤6 :--><link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "Apple-touch-icon-72x72-precomposed.png" ><!--for Non-retina IPhone, IPod Touch, and Android 2.1+ devices:--><link rel= "apple-touch-icon-precomposed "Href=" Apple-touch-icon-precomposed.png "><!--57x57px--

If you do not write HTML,

For example, if the appropriate icon size for the device was 57x57 pixels, IOS searches for filenames in the following or Der

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-touch-icon.pn

So just place these files in the root directory:

• apple-touch-icon-57x57-precomposed.pngor for apple-touch-icon-57x57.png Non-retina IPhone and IPod Touch (@1xdisplay);
• apple-touch-icon-76x76-precomposed.pngor for the apple-touch-icon-76x76.png ipad Mini and the First-and second-generation ipad (@1xdisplay) on ios≥7;
• apple-touch-icon-120x120-precomposed.pngor for apple-touch-icon-120x120.png IPhone 4+ (with @2xdisplay) on ios≥7
• apple-touch-icon-152x152-precomposed.pngor for apple-touch-icon-152x152.png IPad (with @2xdisplay)
• apple-touch-icon-180x180-precomposed.pngor for apple-touch-icon-180x180.png IPhone 6 Plus (with @3xdisplay)
• touch-icon-192x192.pngFor Chrome for Android
• apple-touch-icon-precomposed.png and apple-touch-icon.png As a fallback for everything else (possibly including non-apple devices)

Summarize:

1. If Android must be considered, the last piece of code is recommended

2. Consider iOS only, in no-html format

3. If you are lazy, you can only be a 180x180 apple-touch-icon-precomposed.png in the root directory of the site.

Original: Https://mathiasbynens.be/notes/touch-icons

Favicon Related Settings page and phone, tablet