HTML Favicon 不工作答案

【问题标题】：HTML Favicon Not WorkingHTML Favicon 不工作
【发布时间】：2014-10-11 23:45:50
【问题描述】：

我有<link rel="icon" type="image/png" href="myimage.png" />，为什么它不起作用？它为我提供了 favicon 中的空白/新文档图标。

必须是图标吗？
是否必须来自 URL？

它以前可以工作，但现在停止了，我可能改变了一些东西，但我不这么认为，我没有更新任何东西，添加任何小工具或任何东西，它只是停止工作。

我尝试了一些方法，例如使用 URL 或 .ico 代替 PNG，我也在网上查看过，但我无法弄清楚。可能是因为我将网站文件托管在 google drive 同步中，但我对此表示怀疑。

谢谢。如果有人需要它，我在粘贴箱上有代码：http://pastebin.com/Wzc9zLea

【问题讨论】：

不确定它是否相关，但您的 HTML 代码周围确实不应该有 <a> 标记。
你的结束</head>标签在哪里？在我看来，您有很多可能会或可能不会导致问题的语法问题。你应该仔细检查你的语法。
我注意到您链接到adzerk?我发现它更有可能与您使用的图像有关。顺便问一下，Careers 2.0 和你的网站有什么关系？

标签： html css icons favicon

【解决方案1】：

您需要满足specifications => PNG/GIF/ICO、8 位或 24 位颜色以及 16x16 或 32x32 的尺寸，而您的图像根本不满足这些要求。顺便问一下，为什么你的代码用<a>标签包装？

附： - You might want to remove 'shortcut.'

【讨论】：

【解决方案2】：

要回答您的问题，它是否必须是图标——我认为您的意思是它必须是 .ico 还是 .png 文件，这取决于浏览器。作为一般规则，大多数时候它可以是png，没问题。更多详情，check out this SO answer。

至于它是否必须是“来自 URL”，这很难给出是/否的答案，因为这是一个糟糕的问题。如果您的意思是，它是否必须来自通过 HTTP 协议访问的外部 URL，那么不，它不是。它可以是一个文件路径，并且工作得很好。任何需要 URL 的东西通常都可以使用文件路径。

旁注：

正如我在评论中提到的，没有必要将您的代码包装在<a> 标签中，它可能会与您的代码发生冲突。
有些人说你没有结束 <head> 标记，但我认为它很好，所以不确定这是怎么回事。

【讨论】：

【解决方案3】：

您的网站图标应保存为 .ico 文件类型。将 NAME.ico 放在您网站所在位置的根目录中。您可以访问此站点 http://www.favicon.cc/ 并将您的 .png 制作成网站图标。然后只需将其放入根目录即可。

【讨论】：

【解决方案4】：

这取决于浏览器和目前的设备（平板电脑、智能手机等）。但至少，您的网站图标链接应按如下方式构建：

<link rel="icon" 
  type="image/png" 
  href="http://example.com/myicon.png">

目前，您的文件引用是相对于 URI 的，这意味着如果您的页面比文档根目录更深一层，您的代码就会中断。为了说明，这里有一个例子：

如果您访问 http://example.com，浏览器将在 http://example.com/myicon.png 处查找您的网站图标文件。

如果您访问 http://example.com/mycategory/myarticle.html，浏览器将在 http://example.com/mycategory/myicon.png 处查找您的 favicon 文件，但不会找到。

看到问题了吗？所以要么使用你的 favicon 文件的绝对路径：

<link rel="icon" 
  type="image/png" 
  href="http://example.com/myicon.png">

或使路径相对于您的文档根目录：

<link rel="icon" 
  type="image/png" 
  href="/myicon.png">

查看您发布的 HTML，另一个突出的明显问题是结构不良（无效）的 HTML。删除 HTML 文档中的前四行：

1. HTML
2. <a>
3. <!DOCTYPE html>
4.

第一行只是文本，会混淆试图确定正在加载页面的文档类型的浏览器。第二行是一个有效的 HTML 元素，但它需要存在于父级中

<html>
  <body>
  ...
  </body>
</html>

元素。第三行不是有效的声明，看起来像是在黑暗中刺伤，第四行是空白行。如果您实际上并不知道您要编写的 HTML 标准是什么，最好简单地省略 DOCTYPE 声明，让浏览器猜测要使用的标准，因为这将影响您的 HTML 被解释（和呈现）的方式。我不知道这是否普遍正确，但我认为大多数浏览器在没有定义 DOCTYPE 的情况下会退回到最松散的 HTML 标准。

最后一个想法。如果您是 HTML 新手和/或没有任何形式的正规教育/培训，请花一些时间阅读在线教程。 http://www.w3schools.com 是一个基础资源，可以帮助您更好地理解语言。

【讨论】：