我一直在使用图标生成器，为网站创建各种流行单元/浏览器/操作系统的图标/图标
结果是：
<link rel="shortcut icon" href="favicon.ico />
<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" />
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="160x160" href="favicon-160x160.png" />
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-config" content="browserconfig.xml" />
当然，这似乎有点过头了。我从未见过任何网站使用这么多图标变体
我希望这个图标可以在大多数热门单位上使用，所以人们也可以将网站添加到主屏幕等（带图标）
但是这一切真的是必要的，还是我可以轻松地将其削减到几个？
如果我仅为Apple设备使用一个 152x152大小，并跳过较小的尺寸，会发生什么？
答案 0 :(得分：1)
完全矫枉过正。对于Apple，您只需要以下
apple-touch-icon.png (57x57 iPhone and iPod touch) apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen) apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch) apple-touch-icon-144x144.png (144x144 retina iPad)
但是，如果您错过了其中任何一项，则会发生以下情况：
The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.
If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:
apple-touch-icon-76x76.png
apple-touch-icon.png
因此，您只能轻松使用144x144.png并且不会发生任何事情，无论您的图标设计是否在小尺寸中看起来都不错，但您只能使用一种尺寸
答案 1 :(得分：1)
第一个解决方案 - 根目录中的文件
创建：
favicon.ico作为16x16 ICO图片。这适用于旧版本的IE。apple-touch-icon.png为152x152 PNG图片。这适用于所有iOS设备和Android Chrome。favicon-196x196.png作为196x196 PNG图片。这适用于最近的桌面浏览器（以及Android Chrome，在撰写本文时也支持Apple Touch图标）。mstile-144x144.png作为144x144 PNG图片。对于Windows 8 / IE 10和Windows 8.1 / IE 11。将它们放在网站的根目录中。
用：
声明它们<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
正如您猜测的那样，图标将在必要时缩小尺寸。
是的，favicon.ico未被宣布。只要它位于网站的根目录中，IE就会找到它。如果您使用browserconfig.xml，则相同。
替代解决方案 - 不在根目录中的文件
创建与上面相同的图标。
将它们放在您网站的某个位置，例如。 /path/to/icons。
用：
声明它们<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />
答案 2 :(得分：0)
经过一些研究，我最终得到了这个解决方案：
<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />
此页面帮助了一些http://www.jonathantneal.com/blog/understand-the-favicon/
favicon.png是96x96
favicon.ico是48x48（或一个文件中的3个变种）
apple-touch-icon.png是152x152
mstile.png是144x144
所以，文件有点大，但这样我就不需要一大堆版本和文件了。此外，一个4-8 kb的文件对于用户来说并不是那么多（甚至在手机上），任何设备都应该抓取文件并在需要时缩小它的尺寸
答案 3 :(得分：0)
我的解决方案：
1）以分辨率310x310和PNG格式准备图标图像。
2）转到http://faviconit.com，生成您的收藏夹，下载并解压缩，将所有复制到项目中的某个文件夹中（在我的情况下 root / favicon / ）
3）然后转到http://www.favicon-generator.org/，生成您的favicon，下载并解压缩，然后仅复制 android-icons （ android-icon - * .png ）和 manifest.json 到项目的某个文件夹中（在我的例子中是 root / favicon / ）
4）不要忘记更改 manifest.json 和 browserconfig.xml
中的路径5）然后在你的html头中使用这样的东西：
<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">