Question

我发现this solution使用Chrome扩展程序的content.js（run_at：document_end）中的代码更改了favicon：

(function() {
    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = 'http://www.stackoverflow.com/favicon.ico';
    document.getElementsByTagName('head')[0].appendChild(link);
}());

上述作品令人惊奇。

将整个文档包装在div中以便稍后应用一些必要的自定义CSS时会出现问题。

<html>
  <div id="allContent">
    <head></head>
    <body></body>
  </div>
</html>

在这种情况下，上面的第一个代码不会更改图标。我已经尝试将其最后一行更改为：

document.getElementById("allContent").getElementsByTagName('head')[0].appendChild(link);

虽然链接已正确插入（位于<head>内的<div id="allContent">底部），但网站图标不会更改。

任何人都知道为什么？

Answer 1

<div>在<html>和<head>之间无效。渲染引擎将解决它，但是期望奇怪的副作用，如元属性（如<link rel="icon" ... >）不可预测或被忽略。

动态更改网站图标：div如何包装头部

1 个答案: