图标不会显示在标签上

Posted 2023-02-18

【中文标题】图标不会显示在标签上

【英文标题】：Ico won't display on tabs

【发布时间】：2012-10-03 19:55:20

【问题描述】：

使用 converticon.com，我将我的图标 png 文件转换为 ico 文件。我将以下代码放在我的头部标签中：

<link rel="shortcut icon" href="icons/icon.ico">

我仔细检查过，文件位于适当的位置。图像具有读取和写入功能。然后我在浏览器上加载了该页面，但我得到的只是一个带有虚线边框的空方框。我正在使用 XAMPP 服务器。为什么图片不显示？

【问题讨论】：

你能分享一下你的文件夹结构和代码的截图吗？

抱歉没有回复。我发现浏览器没有读取该格式，尽管它是 ico 格式。我将不得不尝试一个新图标，看看它是否有效。

【参考方案1】：

在 MAMP（假设 XAMP 相同/相似）中，您将执行以下操作：

- With MAMP running/open, hit the "Stop" button.
- Then go to: File > Edit Template > Apache httpd.conf
- Comment out lines:
    #Alias /favicon.ico "/Applications/MAMP/bin/favicon.ico"
    #Alias /icons/ "/Applications/MAMP/Library/icons/"
- Place your favicon.ico file in your site's root directory
- Start MAMP

你可以在这里做各种疯狂的事情。就个人而言，在开发过程中从不担心网站图标。

顺便说一句 - 您不必完全清除浏览器的缓存。只需浏览到 favicon 并刷新它.... localhost:8888/favicon.ico

【讨论】：

在 OSX 上您必须手动编辑配置 - /Applications/MAMP/conf/apache/httpd.conf

这不是 OSX，而​​是 MAMP 与 MAMP Pro。我的回答是针对 MAMP Pro 的，尽管 httpd.conf 需要以任何一种方式进行编辑。您可以通过应用程序或文件系统到达那里

【参考方案2】：

您是否尝试在多个浏览器上对此进行测试？不同的浏览器处理网站图标的方式不同。

这里有一些你可以尝试的方法。

清除缓存

删除收藏夹中链接的所有引用。 清除浏览器中的文件缓存。 关闭目标浏览器的所有实例。 重新打开浏览器并导航到您的网站。

强制刷新

如果您使用的是 Mozilla Firefox，那么您应该： 导航到您的网站 导航到收藏图标的确切位置，例如。 www.site.com/favicon.ico。 在浏览器窗口中单击鼠标右键并选择刷新。

完成后，Firefox 会强制重新加载图标而不是缓存版本。

浏览器的默认行为

指定网站图标的第二种方法依赖于使用预定义的 URI 来识别图像：“/favicon.ico”，它是相对于服务器根目录的。此方法有效，因为某些浏览器已被编程为使用该 URI 查找网站图标，因此我建议将网站图标放在根目录中，看看是否有效。 （也将图标重命名为 favicon.ico）。

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

图像格式

有时网站图标的格式存在问题。如果您在所有网络浏览器中都遇到问题，您可以将网站图标转换为 gif 或 png 并查看是否可以解决问题。

强制浏览器更新网站图标

您可以通过传递 URL 参数来强制浏览器更新您的网站图标。使用 ver 参数，您可以在每次要强制下载新文件时增加版本号。

将此添加到您的标记中。

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

【讨论】：

我已将页面加载到 Pagoda Box 上，但该图标在 Chrome 或 Firefox 中仍然无法使用。不过，我会检查你的其余笔记，如果你是对的，我会给你信用。

图片格式错误。通过转到 ico 的直接 URL 找到。你的答案是最详细的并且有正确的答案。因此，您会获得信用。

【参考方案3】：

只需将 favicon 放在您网站的根目录，例如“example.com/favicon.ico”（但请确保将其命名为 favicon.ico），然后完全删除上述链接元素。如果不存在，浏览器将默认检查此位置是否有网站图标，即使是 IE。

完成此操作后，请务必在测试时清除缓存。

【参考方案4】：

尝试添加type 属性。示例：

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