【问题标题】:Why does my favicon not show up?为什么我的网站图标不显示?
【发布时间】:2013-03-05 00:50:28
【问题描述】:

以下用于在我的html代码中设置favicon:

<link rel="icon" type="img/ico" href="img/favicon.ico">

但是,图标不显示。为什么?

注意:

我已确认该文件位于正确路径的磁盘上。

【问题讨论】:

  • 尝试在问题中包含 URL。很有可能该文件不存在,位于指定的地址。 type 属性值错误(不是有效的 Internet 媒体类型),但可能无效。
  • 因为问题已关闭而作为评论回答:Favicon 仅在从为所提供内容正确设置 mime 类型的网络服务器提供时才有效。从本地文件或从愚蠢的网络服务器加载根本不起作用 (bugs.chromium.org/p/chromium/issues/detail?id=51270)。如果您想要一个可靠的网站图标用于本地开发,最好的办法是内联它 (stackoverflow.com/questions/5199902/…)。
  • @timthelion 看起来闸门已经打开了。随时发表您的评论作为答案。希望我们不会看到大量垃圾答案。 PS不要忘记在评论时@reply,以便用户得到通知。请参阅常见问题解答中的How do comment @replies work?,了解有关它们如何工作的完整详细信息。

标签: html favicon


【解决方案1】:

试试这个:

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

【讨论】:

  • 我相信您可能已经尝试过,但请尝试清除您的浏览器缓存。有时网站图标可能很粘。
  • 尝试将图像放在应用程序的根目录中,并通过 href="~/favicon.ico" 访问它
【解决方案2】:

尝试将profile 属性添加到您的head 标记并使用"image/x-icon" 作为type 属性:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="img/favicon.ico">

如果上面的代码不起作用,请尝试使用href属性的完整图标路径:

<head profile="http://www.w3.org/2005/10/profile">
<link rel="icon" type="image/x-icon" href="http://example.com/img/favicon.ico">

【讨论】:

  • 添加配置文件不会有任何区别 - 它不再是有效的 HTML。您的编辑使事情更清楚。这个问题很可能是他在img之前缺少一个/。
  • 还需要注意的是,根据Wikipedia page on Favicon,rel="icon" type="image/x-icon"只兼容Internet Explorer 9+,其中rel="shortcut icon"(如上图接受的答案)是兼容pretty几乎所有版本的 Internet Explorer。
【解决方案3】:
  1. 真的是.ico,还是只是命名为“.ico”?
  2. 您在什么浏览器中测试?

拥有 favicon 最简单的方法是在根文件夹中放置一个名为“favicon.ico”的图标。这在任何地方都有效,根本不需要代码。

如果您必须将它放在子目录中,请使用:

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

注意img 之前的/,以确保它锚定到根文件夹。

【讨论】:

  • 很多时候,作者无法访问服务器根目录;因此,这种方法远非绝对简单,而是不可能的。
  • 必须承认,我从来没有没有可以访问根目录的服务器——这听起来很糟糕!
  • @Jukka 在 Java Web 应用程序中是正确的。虽然在其他方面它们是完全相互独立的,但它们通常部署到它们的 servlet 容器(例如 Tomcat)中,这样它们就显示为相同主机名下的根级“子目录”,而 HTML 作者通常不知道安装程序将决定调用它们中的每一个。
  • 我认为值得注意的是,有时浏览器会大量缓存网站图标。添加 标记后,尝试查看页面源并单击 href= 链接。这将让您查看链接是否正确。
【解决方案4】:

网站图标仅在从为所提供内容正确设置 mime 类型的网络服务器提供时才有效。从本地文件加载可能不适用于 chromium。从配置不正确的网络服务器加载将无法正常工作。

lighthttpd 等 Web 服务器必须为 configured manually 才能正确设置 mime 类型。

由于 mimetype 分配可能不适用于所有环境,我建议您改用内联 base64 encoded ico 文件。这也将加载更快,因为它减少了发送到服务器的 http 请求数。

在基于 POSIX 的系统上,您可以使用 base64 命令对文件进行 base64 编码。

要创建 base64 编码的 ico 行,请使用以下命令:

$ base64 favicon.ico --wrap 0

并将输出插入该行:

<link href="data:image/x-icon;base64,HERE" rel="icon" type="image/x-icon" />

像这样替换HERE这个词:

<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAA////AERpOgA5cCcA7vDtAF6jSABllFcAuuCvAK2trQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFjMzMzMzNxARYzMzMzVBEEERYzMzNhERZxRGMzZxQEA2FER3cRSAgTNxgEEREIQBMzFIARERFEEzNhERARFAATMzYREBEAhBMzMzEYEBFEEzMzNhEQQRQDMzMzcRgEAAMzMzNhERgIEzMzMyERgEQDMzMzMRAEgEMzMzMxERAEEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" rel="icon" type="image/x-icon" />

【讨论】:

  • 非常好的解决方案。谢谢!
猜你喜欢
  • 2012-11-22
  • 2020-05-12
  • 1970-01-01
  • 2023-03-26
  • 1970-01-01
  • 1970-01-01
  • 2016-12-31
  • 1970-01-01
相关资源
最近更新 更多