Iphone Favicon未在safari（iOS 12 13）中显示，但在Chrome（Android和PC）中正常显示

我的团队现在正在开发一个基于vue cli的webapp，旨在在Safari（iOS）和Chrome（android）上运行。 favicon通常在chrome上显示，但在safari中不显示，或者在某些页面上显示，但在某些页面上不显示

我对这个问题已经思考了两周了。 我试图通过

/favicon？v=2

强制刷新favicon，或者使用完整的url路径或相对路径，或者使用几种不同的方式来编写favicon，但没有任何效果。 有时favicon只会出现一秒钟，然后消失。 一些页面说safari iphone可以大量缓存，但我找不到一个好方法来清理缓存

我使用vue cli，因此下面的链接标记是用public/index.html编写的，如下所示，而favicon是用public/favicon.ico编写的

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

构建之后，上面的代码变成了类似代码的代码

<link rel="icon" href="https://www.mysitesite.com/favicon.ico">

chrome android或chrome pc正常显示，但safari ios不显示

我也尝试了下面的一些代码，但不起作用

<link rel="icon" href="https://www.mysitesite.com/favicon.ico?v=2" />

另外，我尝试通过html网页包插件生成favicon路径，但没有在safari中显示

apple touch图标在我添加书签时显示，但favicon没有显示在safari选项卡上

<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">

有人知道解决方案吗？或者这只是safari中的一个bug？

---

非常感谢。

您可能需要运行favicon checker（）来发现经典问题，例如无效路径。充分披露：我是这项服务的作者。

<link rel="icon" href="./favicon.ico?v=2" />

<link rel="icon" href="./favicon.ico?v=2" />

<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon-180x180.png">