什么样的方式在浏览器中添加网站图标比较好？

Question

我注意到有很多方法可以添加网站图标。由于设备和系统的不同，添加图标的格式也非常不同。那么我怎样才能满足他们的所有要求呢？什么是最安全的解决方案？

例如：

方法一：

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

方法二：

<link rel="icon" type="image/vnd.microsoft.icon" href="img/favicon.ico" />

方法三：

  <link rel="apple-touch-icon" href="img/touch-icon-iphone.png">
  <link rel="apple-touch-icon" sizes="76x76" href="img/touch-icon-ipad.png">
  <link rel="apple-touch-icon" sizes="120x120" href="img/touch-icon-iphone-retina.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/touch-icon-ipad-retina.png">

我了解到方法三是在苹果设备的主屏幕上添加图标。而ico文件是一种存储各种大小图标的文件格式。

因此，如果我使用方法三（Apple 的方式），它会获得与其他两个相同的效果吗？这三种方法之间的关系是什么？如果把它们放在一起，会发生什么？它们如何相互影响？

Answer 1

这些浏览器和图标之间不是一对一的关系。但是，以下列表很好地概述了该主题：

• 旧版桌面浏览器（例如旧版 IE）：favicon.ico，声明为<link rel="shortcut icon" href="/favicon.ico">
• 现代桌面浏览器（例如最新的 Chrome）：16x16 PNG 图标，使用<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">. 然而，现代浏览器可以处理遗留的favicon.ico，所以这不是一个严格的要求。
• 带有 Mac OS Yosemite 的 Safari：Apple Touch 图标，声明为 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
• iPhone 和 iPad：几个 Apple Touch 图标，从 57x57（第一代 iPhone）到 180x180（iOS 8，即 iPhone 6 和最新的 iPad），声明为 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
• Android Chrome，之前的 M39 / Android 5 / Lollipop：192x192 PNG 图标，使用<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">. 它还使用 Apple Touch 图标作为书签图标。
• Android Chrome M39+ / Android 5 / Lollipop：在清单中声明最多 6 个图标，使用<link rel="manifest" href="/manifest.json">. 它还使用 Apple Touch 图标作为书签图标。
• IE 10 / Windows 8：一个 144x144 的图标，声明为 <meta name="msapplication-TileImage" content="/mstile-144x144.png">
• IE 11 / Windows 8.1：在 manifest中声明最多 4 个图标，声明为<meta name="msapplication-config" content="/browserconfig.xml">
• Coast by Opera：一个 228x228 PNG 图标，声明为<link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
• Google TV：一个 96x96 PNG 图标，声明为<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
• ... Yandex 浏览器等

除了大量的图标外，还有一个设计问题。最常见的陷阱是透明度。网站图标通常是透明的，这很好。但是，iOS 禁止它并用黑色填充透明区域。例如，将SO 触摸图标与将 SO 添加到 iPhone/iPad 主屏幕时实际获得的内容进行比较。因此，重要的是要牢记设计，而不仅仅是盲目地调整主图片的大小。

出于这些原因，我建议您使用此图标生成器。它生成支持所有主要平台所需的所有必需图标，还可以让您设计每个平台的图标。完全披露：我是这项服务的作者。