标签：sea first 网站 this html one 无效 比较 命令
<link rel="shortcut icon" href="/favicon.ico">
大部分网站都采用这种方式定义一个favicon。但是shortcut 并不是HTML5规定的link types中的一员。实际上 shortcut是属于IE的。如果不考虑IE 直接用 rel=“icon”即可。
如果忽略rel属性中shortcut中的值，IE《=8会忽略这个声明，然后在根目录下寻找favicon.ico文件。实际上，大部分浏览器在没有rel申明时也是这样做的。如果在IE中用rel=“icon shortcut”也是无效的，因为IE并不会把rel属性看作一个用空格分割的list。
IE9不需要shortcut，只要规定type=“image／x-icon”即可。
请确保在你的网站上一定要在根木下放一个favicon，并将其命名为favicon.ico。
大部分的浏览器都会默认的自动搜索/favicon.ico
这也就意味着可以直接省略上面这一行命令。唯一的区别是，省略这一行命令，浏览器会把所有文件都加载好之后再去加载favicon,但是如果有显式的定义，那么浏览器解析到link rel=“icon”声明的时候就会加载它。（还不是很明白？明天试一下）
更新： html现在规定显式声明/favicon.ico
但是省略显式声明的话，对于从http或者https中获取的文件，用户代理可能会尝试获取另外使用解析url/favicon.ico获得的绝对路径，就好像采用了icon一样。
更新：由于历史原因，HTML 承认 shortcut的时候，只是后面要直接跟U+0020空格和icon。
更新，IE11支持gif或者png favicon。当然/favicon.ico还是默认的。
原文：https://mathiasbynens.be/notes/rel-shortcut-icon
关于touch icons你所要知道的一切：
在mobile device 和 tablets中设定favicon:
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Chrome v31+ for Android does support this syntax,采用下面的方式
<link rel="icon" sizes="196x196" href="apple-touch-icon.png">
另外 ios 会自动添加一些特效，从ios2开始可以控制不添加特效
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
从ios7开始，不会再自动添加特效，所以也不用precomposed
不同的图标尺寸
最完美的解决方法是创建一个高分辨率的图标，所有的设备都采用这个图标，Apple就是这样做的。
从ios4.2开始可以针对不同设备分辨率规定不同的图标了：
<!-- For non-Retina (@1× display) iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px --> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> <!-- For iPhone with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For iPhone with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> <!-- For iPad with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPad with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> <!-- For iPhone 6 Plus with @3× display: --> <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">
相应的规则如下：
1.如果没有合适的尺寸，采用比推荐尺寸大的里面的最小值
2.如果没有比推荐尺寸大的，就采用最大尺寸
3.如果多个图标都符合，采用有precomposed关键字的
简化版如下
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"><!-- 57×57px --> <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">
在这些系统中，只有文件中最后一个值会被使用，因此，推荐这样写
<!-- For Chrome for Android: --> <link rel="icon" sizes="192x192" href="touch-icon-192x192.png"> <!-- For iPhone 6 Plus with @3× display: --> <link rel="apple-touch-icon-precomposed" sizes="180x180" href="apple-touch-icon-180x180-precomposed.png"> <!-- For iPad with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152-precomposed.png"> <!-- For iPad with @2× display running iOS ≤ 6: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with @2× display running iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120-precomposed.png"> <!-- For iPhone with @2× display 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 (@1× display) on iOS ≥ 7: --> <link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76-precomposed.png"> <!-- For the iPad mini and the first- and second-generation iPad (@1× display) 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"><!-- 57×57px -->
如果不写html，
For example, if the appropriate icon size for the device is 57 × 57 pixels, iOS searches for filenames in the following order:
apple-touch-icon-57x57-precomposed.pngapple-touch-icon-57x57.pngapple-touch-icon-precomposed.pngapple-touch-icon.pn所以只要在根目录下放置这些文件即可：
apple-touch-icon-57x57-precomposed.png or apple-touch-icon-57x57.png for non-Retina iPhone and iPod Touch (@1× display);apple-touch-icon-76x76-precomposed.png or apple-touch-icon-76x76.png for the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7;apple-touch-icon-120x120-precomposed.png or apple-touch-icon-120x120.png for iPhone 4+ (with @2× display) on iOS ≥ 7apple-touch-icon-152x152-precomposed.png or apple-touch-icon-152x152.png for iPad 3+ (with @2× display)apple-touch-icon-180x180-precomposed.png or apple-touch-icon-180x180.png for iPhone 6 Plus (with @3× display)touch-icon-192x192.png for Chrome for Androidapple-touch-icon-precomposed.png and apple-touch-icon.png as a fallback for everything else (possibly including non-Apple devices)总结：
1.若必须考虑android，推荐最后一段代码段
2.只考虑ios，采用no-html格式
3.如果比较懒，可以只当一个180X180的apple-touch-icon-precomposed.png在网站的根目录下面。
原文：https://mathiasbynens.be/notes/touch-icons
标签：sea first 网站 this html one 无效 比较 命令
原文地址：http://www.cnblogs.com/shirleyyang-fe/p/6049249.html
