偏好-最佳实践

提问者：小点点

我试着弄清楚所有这些不同的大小和格式，需要的图标，触摸图标，现在也是瓷砖图标。

我读过这篇文章:http://www.jonathantneal.com/blog/understand-the-favicon，但我仍然有点不清楚到底该用什么在所有设备和浏览器上都看起来不错>=IE8。

我认为我应该创建以下内容：

ICO
favicon.ico(32x32)

png
favicon.png(96x96)

平铺图标
tileicon.png(144x144)

Apple Touch图标
Apple-touch-icon-precomposed.png(152x152)
基于此https://github.com/h5bp/html5-boilerplate/issues/1367

...然后用这个密码把他们端上来？

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

我错过什么了吗？

我不清楚这是否能涵盖IE10？

共2个答案

匿名用户

Favicon比它听起来的要复杂得多。10年前，favicon.ico是唯一需要的项目。然后是触控图标，然后是多个触控图标，因为iOS设备的屏幕分辨率不同，然后是Windows的平铺图标...

这里的一些答案是非常全面的--而且是压倒性的（所有这些，仅仅是为了一个favicon？）。然而，它们无法指示Windows的310x310平铺图标建议为558x558。由于它们是几个月前写的，所以它们没有提到Android Chrome M39的最新清单，也没有提到OS X El Capitan上Safari的固定标签SVG图标。

每平台设计是另一个棘手但被忽视的话题。例如，favicon通常是透明的。但是iOS不支持透明性（举个例子，比较一下SO触控图标和将SO添加到iPhone主屏幕时得到的效果）。

由于这些原因，我认为favicon的最佳实践是不手动创建它。取而代之的是，使用一个工具来自动化整个过程并强制执行平台指南。

我建议您使用RealFaviconGenerator。它生成完成工作所需的所有图片和HTML代码：

favicon.ico和桌面浏览器的PNG图标
iOS和Android设备的苹果触摸图标
Windows 8瓷砖
OS X El Capitan上Safari的固定选项卡图标

例如，它不仅生成MSApplication-TileImage图片和标记，还生成IE11支持的最新BrowserConfig.xml文件。它也在几个月前进行了更新，以支持Android Chrome manifest和Safari OS X El Capitan。

完全披露：我是这个网站的作者。

匿名用户

以下是favicon用于移动和平板电脑的完整（据我所知）示例：

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

对于IE11，这里有一个常见问题