favicon 相关设置 网页和手机平板

Posted 2020-08-19

<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

不同的图标尺寸

• one that measures 76 × 76 pixels for iPad and iPad Mini models with a 1× display;
• one that measures 120 × 120 pixels for iPhone 4s, iPhone 5, iPhone 6 (which have a 2× display);
• one that measures 152 × 152 pixels for iPad and iPad Mini models with a 2× display;
• one that measures 180 × 180 pixels for iPhone 6 Plus (which has a 3× display).

　　最完美的解决方法是创建一个高分辨率的图标，所有的设备都采用这个图标，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:

1. apple-touch-icon-57x57-precomposed.png
2. apple-touch-icon-57x57.png
3. apple-touch-icon-precomposed.png
4. apple-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 ≥ 7
• apple-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 Android
• apple-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