网站图标、触摸图标、磁贴图标等，你需要哪些？

以下是 Philippe Bernard 的客座文章。 Philippe 研究了创建网站图标（以及所有相关的图形和标记）以确保在所有地方获得最佳质量输出所需的操作。剧透警告：这需要很多不同的图形和标记。此外，需要完全披露：Philippe 创建了一个工具来帮助使用它，他在本文中展示了该工具。

网站图标于 1999 年由 Internet Explorer 5 引入 (参考)，并在几个月后由 W3C 标准化。它们是代表网站的小型图形。

从那时起，大多数桌面浏览器都遵循了这一趋势，并在某种程度上使用了网站图标。 这是一项轻松的工作，不是吗？ 只需创建一个小图片添加到任何 Web 项目中，使其“最终完成”。 没什么特别的。 还是？

让我们来做个测验！

主要网站图标文件是什么？

答案：favicon.ico。 为了确保：这不是将 PNG 重命名为 favicon.ico。 尽管某些浏览器非常宽松，可以原谅此错误，但 ICO 是一种不同的格式，它支持图像的多个版本。

问题：favicon.ico 的尺寸应该是什么？

• A: 16×16。 标准尺寸。
• B: 32×32。 网站图标不是很久以前更新了吗？
• C: 64×64。 你知道，有了所有这些新的高像素密度屏幕。
• D: 以上都不是.

答案：D。

favicon.ico 是一种最初由 Microsoft 设计的格式，其他供应商都采用了这种格式。 Microsoft 建议 使用 16×16、32×32 和 48×48。是的，单个 ICO 文件可以包含多个图形。

桌面浏览器通常在选项卡中使用网站图标，在标准分辨率显示屏上，16×16 版本就足够了

但 16×16 图标对于其他位置来说太小了：任务栏和桌面。

只要图标包含多个图片，结果就会好很多。

问题：favicon.png 的目的是什么？

深入研究该主题时，我们经常会遇到另一个文件，favicon.png。人们一直有关于它的问题 一直以来。 它到底是什么？

• A: 针对不支持 favicon.ico 的浏览器的图标。 比如 Firefox？
• B: 高分辨率图标。 你知道，有了所有这些新的高像素密度显示屏。
• C: 过去遗留下来的东西。 现在有现代图标，比如 Apple Touch 图标。
• D: 答案 D。 很复杂。

答案：D。 自 HTML5 采用以来，favicon.ico 并不是非常有用。引入了 sizes 属性来指定同一图标的多个不同版本，这些版本可以是 PNG 文件

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

那么我们应该声明什么呢？

让我们面对一个令人不满意的事实。尽管所有桌面浏览器都支持 favicon.ico，但此文件大多已弃用。是的，你仍然可以依赖此文件，它将按预期工作。但说真的，这是一种旧的已弃用格式。它在 Web 技术中其他地方都没有使用。PNG 更加一致。

favicon.ico 用于旧版本的 IE。对于其他浏览器和 IE 的最新版本，我们使用 PNG 图标。那么，我们应该声明哪些 sizes？ 我们很快就会介绍这一点。

问题：我们需要支持哪些格式的移动平台？

根据 SmartInsights，超过 26% 的 Web 流量来自智能手机和平板电脑。 这是未来。 你需要做些什么来支持这个世界？

• A: favicon.ico。 15 年前有效，现在也应该有效。
• B: PNG 图标。 你说你会介绍这一点。
• C: Apple Touch 图标。 当然。
• D: 正确答案从不列出。

答案：D。你需要 PNG 图标。 和 Apple Touch 图标。 和 Windows 8 磁贴图形。 和 一个名为 browserconfig.xml 的文件。

移动平台比经典的桌面浏览器更加异构。屏幕尺寸和分辨率差异很大，并且没有像 Internet 开始传播时 Windows 那样的主要操作系统。结果：不要指望使用单个通用图形和 HTML 代码中的单个通用声明来设计移动网站图标。

问题：PNG 图标的尺寸应该是什么？

• A: 96×96 用于 Google TV
• B: 196×196 用于 Android Chrome
• C: 228×228 用于 Opera 的 Coast
• D: 以上所有

答案：D，以及更多。 比如用于旧版本 Opera Speed Dial（已不再使用）的 160×160 图片，或者用于 Chrome 网上应用店 的 128×128 图标，这实际上取决于你要支持的平台。

问题：Apple Touch 图标的尺寸是多少？

Apple Touch 图标用于 iOS 设备的书签和“添加到主屏幕”的网站。 如果你的答案是 57×57，恭喜你。这是正确的。嗯，7 年前，第一部 iPhone 发布的时候是正确的。

答案：高达 180×180。

自第一部 iPhone 诞生以来，已经发布了三次。

• iPad。它的屏幕比 iPhone 大很多。
• 视网膜屏幕。它将原始屏幕的像素密度提高一倍。
• iOS 7。其扁平化风格使 iPhone/iPad 的外观略有不同。

总共有九种组合

设备	屏幕	iOS 版本	图标尺寸
iPhone	经典	6 及更早版本	57×57
		7	60×60
	视网膜	6 及更早版本	114×114
		7	120×120
	6 Plus	8 及更高版本	180×180
iPad	经典	6 及更早版本	72×72
		7	76×76
	视网膜	6 及更早版本	144×144
		7	152×152

如果你没有正确答案，别怪自己。在拥有 apple-touch-icon.png 的 5,000 个顶级网站中，只有不到 4% 做对了。

有些人可能会争辩说，9 个图形不是必需的。 但至少，你的主 Apple Touch 图标应该是 152×152。 运行 iOS 7 的视网膜 iPad 将找到它需要的内容，而较小的设备可以根据需要缩小图片尺寸。

问题：是否需要在 HTML 中声明 Apple Touch 图标？

• A: 我不知道。 得了吧，你总得回答点什么吧！
• B: 是的。 否则 iOS 如何找到它们？
• C: 否。 Apple 定义了约定，以便 iOS 设备能够始终找到它们。
• D: 否，但……

答案：D… 但由于某些其他平台也使用 Apple Touch 图标，因此无论如何声明它是比较安全的。

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

听起来很奇怪，但 iOS 设备并不是唯一寻找 Apple Touch 图标的设备。由于这些图标很流行，而且比高分辨率 PNG 图标更常见，因此某些浏览器（比如 Android Chrome）也在使用它们。 因此，声明它们比较安全，以防兼容设备或浏览器的访问者能够处理其中一个图标。

问题：定义 Windows 8 平板电脑磁贴需要什么？

• A：Windows 8 平板电脑？这是什么？
• B：favicon.ico。史蒂夫·鲍尔默的遗产。
• C：两个msapplication-TileColor 和 msapplication-TileImage 元标签。
• D：browserconfig.xml.

答案：对于 Windows 8.0 和 IE 10 来说是 C，对于 Windows 8.1 和 IE 11 来说是 D。答案 A 在某种程度上也是正确的。

Windows 8.0 声明通常如下所示

<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

Windows 8.1 和 IE 11 依赖于在browserconfig.xml中声明的多个磁贴图片。例如

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/mstile-70x70.png"/>
      <square150x150logo src="/mstile-150x150.png"/>
      <square310x310logo src="/mstile-310x310.png"/>
      <wide310x150logo src="/mstile-310x150.png"/>
      <TileColor>#2b5797</TileColor>
    </tile>
  </msapplication>
</browserconfig>

新的 Metro UI 带有一套新的指南，例如大多数内置应用使用的“白色剪影”。

问题：square150x150logo 磁贴图片的大小是多少？

• A：150×150。 你不会读吗？
• B：其他尺寸。

答案：B，270×270。 微软建议使用更大的尺寸 以支持高密度屏幕。

---

恭喜，你完成了测验！你表现如何？

这些问题旨在说明这个主题的复杂性，尽管它看起来很简单。favicon.ico 只是一个 favicon.ico 文件的时代已经过去了。但是旧的习惯仍然存在，导致了荒谬的情况。我们可以花几天时间设计一个超级整洁的自适应设计，但只放置一个 57×57 的 Apple Touch 图标，只适合现在几乎不使用的旧设备。

---

移动时代的 favicon 生成器

在 2014 年，创建多平台 favicon 是一项复杂的任务，很难做到完美。当然，你可以使用 favicon.ico，一个 32×32 的 PNG 图标和一个 152×152 的 apple-touch-icon.png 在你的网站根目录下获得一个不错的效果。但是，完成这项工作可能需要十几个图片。除非我们在一个预算充足的大型项目上工作，否则我们通常没有那么多时间花在这个小任务上。

作为 RealFaviconGenerator 的作者，让我给你一个明智的建议：使用 RealFaviconGenerator。与其他常见的 favicon 生成器不同，它满足了两种需求。

不同的平台涉及不同的 UI。虽然它肯定不是 Photoshop 的在线版本，但 RealFaviconGenerator 提供了一些设置来设计针对各种平台的不错图标。例如，iOS 的不透明背景（苹果不允许使用透明图标）或 Windows 8 的白色剪影。

生成所有你需要覆盖主要平台的图片和 HTML 代码：PC/Mac、iOS、Android、Windows 8 等。 生成的图片和代码经过了广泛的测试，以确保该服务能够兑现承诺。

例如，通过提交一个高分辨率图标，我能够在几次点击中生成这组图标。

现在它和 10 年前一样容易：制作一个图形，5 分钟后你就可以使用你的最新 favicon。