快捷方式图标不起作用答案

【问题标题】：Shortcut icon is not working快捷方式图标不起作用
【发布时间】：2012-08-20 10:43:45
【问题描述】：

我正在创建一个 HTML 网页。我还远未完成，因此目前不应过多关注以下问题。但我对为什么我的快捷方式图标代码不起作用感到困惑。我通过将所有文件放在同一个文件夹中来测试所有内容（离线，没有服务器或类似的东西）

代码是

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

我尝试了不同的 ico 文件，它只适用于上传到网站的 ico。例如下面的代码将起作用。

<link rel="SHORTCUT ICON" type="image/x-icon" href="\WEBSITEFOLDER\favicon.ico">

【问题讨论】：

<link rel="shortcut icon" href="http://example.com/myicon.ico" /> 不要使路径相对。会工作的。
我认为这种行为是设计使然：favicon.ico 文件需要托管在网站上，而不是本地文件系统上。
完全相关：stackoverflow.com/questions/11221292/…

标签： html favicon

【解决方案1】：

试试：

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

或：

<link rel="Shortcut Icon" type="image/ico" href="favicon.ico">

【讨论】：

我没有得到结果。我只能通过将它上传到网络服务器来修复它。
如果没有结果，这一次......可能图标有问题......过度尝试插入：st.interakt.md/content/assets/img/favicon.ico"> 是从网站中提取的图标。通常，如果您插入它，您应该会得到一个图标。尝试然后回复
+1。 Milky 的答案也有效，但它很长。这很短。

【解决方案2】：

我遇到了类似的问题，结果发现实际文件的大小是导致问题的原因。根据消息来源，它必须是 16x16 或 32x32。我会使用一个图标生成器，例如：x-iconeditor.com。

【讨论】：

【解决方案3】：

如果您想在本地文件上添加网站图标，则必须使用数据 URI

看到这个答案：local (file://) website favicon works in Firefox, not in Chrome or Safari- why?

【讨论】：

【解决方案4】：

将 favicon 图标大小设置为 16x16，它将在 chrome 中工作...

【讨论】：

【解决方案5】：

我也有同样的问题。我“借用”的网站使用了一个名为“icons”的文件夹作为 .ico 文件的位置，所以我完全遵循了这一点。我女朋友使用的服务是 Web.com。无论出于何种原因，如果 Web.com 的快捷方式图标位于根目录以外的任何位置，它都不会显示在 Internet Explorer 中。我只是将 favicon 文件移动到 index.html 所在的位置，并更改了索引中的那一行代码以反映这一点。

解决了（在我的情况下）！祝你好运！

【讨论】：

【解决方案6】：

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

尝试将所有相对路径放到图标文件中

【讨论】：

【解决方案7】：

它不起作用，绝对是因为链接目标不正确。如果您将图标放在网页的同一文件夹中，请更正以下链接：

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

这意味着 favicon.ico 在当前文件夹中。

但是您可以使用调试器，即 chrome 调试器并导航到您网页的源代码，即右键单击您图标的链接 -> 在新标签中打开，看看它是如何工作的

【讨论】：

【解决方案8】：

尝试为图片图标添加绝对路径，并使用 48x48 px 图片尺寸。

这对我有用

<link rel="shortcut icon" type="image/png" href="http://yoursite.com/Content/Images/favicon.png" />

【讨论】：