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

Question

我的团队现在正在开发一个基于 vue-cli 的 web 应用程序，旨在在 Safari(iOS) 和 Chrome(android) 上运行。 图标在 chrome 上正常显示，但在 safari 中不显示，或者在某些页面上显示但在某些页面上不显示。

我在这个问题上想了两个星期。 我试图通过./favicon?v=2强制刷新图标，或者使用完整的 url 路径或相对路径，或者使用几种不同的方式来编写图标，但没有任何效果。 有时，图标只显示一秒钟然后消失。 有些页面说 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">

镀铬 android 或镀铬 pc 显示正常但不显示 safari ios

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

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

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

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

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

另外，我尝试通过 html-webpack-plugin 生成网站图标路径，但未在 safari 中显示。

apple-touch-icon 在我添加书签时显示，但图标未显示在 safari 选项卡上。

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

有人知道解决方案还是这只是 safari 中的错误？ 太感谢了。