Safari浏览器中无法显示网站图标

Question

我已经在互联网上搜索了很长时间，但仍然不知道为什么 Safari 上不显示网站图标(favicon)，在 Chrome 和 Firefox 上显示正常， 我已经尝试了以下代码：

我已经尝试了以下代码：

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

或这个

<link rel="shortcut icon" href="favicon.ico?23189123" type="image/x-icon"/>

我把网站的收藏图标更改为32位，或从Safari库中删除WebpageIcons.db等。我会在BrowserStack上检查网站，以防是我的缓存问题。

还有什么其他的我错过了吗？请让我知道任何建议，非常感谢。

- user3507631

---

进行一次清除刷新。您的浏览器缓存中有数据！ - Bhojendra Rauniyar

还要确保收藏图标图像在正确的路径中。正如C-link Nepal所说，清除浏览器缓存。 - G.L.P

我已经在BrowserStack上检查了该网站，以防我的缓存有问题，你认为BrowserStack也可能被缓存了吗？（我想它会定期刷新）Favicon位于/site中，所以我确定路径是正确的，并且在头部指向了该文件。 - user3507631

重新将您的网站图标另存为8位（256色），然后重新上传到您的网站。这可能会有所帮助。 - CroaToa

成功了！我的电脑缓存非常严重，即使清除缓存或使用browserstacks /隐身模式也无法看到网站图标（所有图标都被缓存了）。所以我换了另一台电脑，在所有浏览器中都可以正常工作。谢谢大家。 - user3507631

你有查看这个链接吗？(https://discussions.apple.com/thread/3939787?tstart=0) - Esterlinkof

Answer 1

Safari使用的是"apple-touch-icon"而不仅仅是"icon"。此外，如果您希望在所有苹果设备上显示图标，则必须为所有设备指定图标。

在此处阅读更多信息：https://css-tricks.com/favicon-quiz/

- Ogbonnaya Ngwu

Answer 2

我在我的Ubuntu机器上开发Next.js项目时遇到了一个类似的问题，即在Safari浏览器中无法显示网站图标。我找到了一个解决方案，详细介绍在这里（链接1）适用于本地开发。

此外，为了确保网站图标在实际环境中（如测试或生产环境）正确显示，我还需要进行额外的配置。我按照这个指南（链接2）的建议，添加了crossorigin="use-credentials"属性。

- Ken Aqshal

Answer 3

使用https://favicon.io/生成HTML代码片段和文件集，以便使用您的图像作为网站图标。

- Krishan Madushanka