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

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

方法1最简单，方法2适用于老版本的Internet Explorer，正如你所说的方法3适用于苹果设备。

您应该能够使用全部 3 个以获得最大支持。它们将相互补充，每个设备都使用相关设备并忽略其他设备。

有关详细信息，请参阅 Favicon on Wikipedia。

Answer 2

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

旧版桌面浏览器（例如旧版 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（iOS8，即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：up to 6 icons declared in a manifest，声明为 <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：up to 4 icons declared in a manifest，用 <meta name="msapplication-config" content="/browserconfig.xml">
歌剧海岸：a 228x228 PNG icon，声明为 <link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Google 电视：a 96x96 PNG icon，声明为 <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
...Yandex 浏览器等

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

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

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

What kind of way is better to add website icon in browser?

ios

icons

favicon