我使用在线工具RealFaviconGenerator为我的网站生成favicon，以支持各种设备和浏览器。
我的大多数爱好者都有透明的背景，除了apple-touch-icon，因为iOS添加了黑色背景，我不想要。所以，我手动添加了白色背景，并将该图像用于iOS。
除了iOS上的谷歌浏览器（特别是iPad mini 1）之外，我最喜欢的所有设备都能很好地使用这些设备。我想要的是浏览器使用其中一个具有透明背景的图标，就像在计算机上一样（可能是favicon.ico或favicon.png）。但是，Chrome会使用其中一个apple-touch-icon s，它具有白色背景。
我的问题是：所有iOS设备上Chrome的行为是否正常，或者我做错了什么？
其他信息：
我不确定这是否相关，但无论如何我都要添加它。
为了更容易组织favicon图像，我将它们全部放在一个单独的文件夹中（而不是根目录）。但是，我将favicon.ico和browserconfig.xml文件保留在根文件夹中，并删除了明确的link，因为生成器的常见问题解答建议如此：
当您的favicon位于根目录中时，RealFaviconGenerator会执行此操作 不生成此代码。这是因为它以某种方式混淆了其他一些 浏览器，如Chrome。因为IE会查找名为favicon.ico的文件 无论如何，最好的解决方案是不要谈论它。
默认情况下，Internet Explorer 11在的位置查找browserconfig.xml 网站的根。
任何帮助都会很乐意接受！
更新
这就是我现在<head>的内容。请注意，我还将favicon.ico添加为<link>。当我尝试使用它时，它似乎工作正常，iOS Chrome显示正确的图标。但是，当我刷新页面一次时，favicon又回到了早期的白色背景，并保持不变。
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" sizes="57x57" href="/pics/icons/apple-touch-icon-57x57.png?v=2">
<link rel="apple-touch-icon" sizes="60x60" href="/pics/icons/apple-touch-icon-60x60.png?v=2">
<link rel="apple-touch-icon" sizes="72x72" href="/pics/icons/apple-touch-icon-72x72.png?v=2">
<link rel="apple-touch-icon" sizes="76x76" href="/pics/icons/apple-touch-icon-76x76.png?v=2">
<link rel="apple-touch-icon" sizes="114x114" href="/pics/icons/apple-touch-icon-114x114.png?v=2">
<link rel="apple-touch-icon" sizes="120x120" href="/pics/icons/apple-touch-icon-120x120.png?v=2">
<link rel="apple-touch-icon" sizes="144x144" href="/pics/icons/apple-touch-icon-144x144.png?v=2">
<link rel="apple-touch-icon" sizes="152x152" href="/pics/icons/apple-touch-icon-152x152.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/pics/icons/apple-touch-icon-180x180.png?v=2">
<link rel="icon" type="image/png" href="/pics/icons/favicon-32x32.png?v=2" sizes="32x32">
<link rel="icon" type="image/png" href="/pics/icons/android-chrome-192x192.png?v=2" sizes="192x192">
<link rel="icon" type="image/png" href="/pics/icons/favicon-96x96.png?v=2" sizes="96x96">
<link rel="icon" type="image/png" href="/pics/icons/favicon-16x16.png?v=2" sizes="16x16">
<link rel="manifest" href="/pics/icons/manifest.json?v=2">
<link rel="mask-icon" href="/pics/icons/safari-pinned-tab.svg?v=2" color="#5bbad5">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/pics/icons/mstile-144x144.png?v=2">
<meta name="theme-color" content="#ffffff">
答案 0 :(得分：0)
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
or
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Have you tried this inside of your <head>? It works fine on my website. I have just tested it on Google Chrome for IOS.
答案 1 :(得分：0)
您所观察到的是正常的，即使这不是您想要的：iOS Chrome takes the Apple Touch icon for bookmark and favicon.ico for the regular tab icon。在iPad Mini上，它采用57x57 Touch图标和嵌入的16x16 pic favicon.ico。
Android Chrome并没有那么不同：
manifest.json。长话短说：没有解决方法。值得尝试删除所有触摸图标，以了解iOS Chrome的行为方式，但这不是您将要在制作中执行的操作。
哦，作为RealFaviconGenerator的作者，我祝贺你有这个绝佳的选择：）