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，因此这不是一个严格的要求。
Safari with Mac OS Yosemite：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：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">
Opera by Opera：a 228x228 PNG icon，声明为<link rel="icon" type="image/png" href="/favicon-228x228.png" sizes="228x228">
Google TV：a 96x96 PNG icon，声明为<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
... Yandex浏览器等

除了大量的图标外，还存在设计问题。最常见的陷阱是透明度。 Favicons通常是透明的，这很好。但是，iOS禁止它并用黑色填充透明区域。举个例子，比较SO touch icon以及将SO添加到iPhone / iPad主屏幕时的实际情况。因此，重要的是要牢记设计，而不是盲目地调整主图片的大小。

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

Answer 2

方法1是最简单的，方法2适用于旧版本的Internet Explorer，并且正如您所说的方法3适用于苹果设备。

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

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

在浏览器中添加网站图标会有什么样的方式？

2 个答案: