无法在 Meteor 中加载 Favicon答案

【问题标题】：Can't load Favicon in Meteor无法在 Meteor 中加载 Favicon
【发布时间】：2017-07-26 20:50:19
【问题描述】：

我无法在标签中的网站名称旁边添加网站图标。我检查了三个 SO 帖子并尝试了所有可能的组合。我的 logo.ico 或 logo.png 文件位于“ProjectName/public”文件夹中。如果我像这样链接它们，我可以从这个文件夹访问浏览器上加载的其他图像：

<body>
  {{> carouselTemplate}}
</body>

<template name="carouselTemplate">
  <div class="container">
    <div class="row">
      <div class="col-sm-12">

        <div id="my-slider" class="carousel slide" data-ride="carousel">
          <!-- indicators dot nav -->

          <!-- wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <!-- for each slide one div [active is the first slide that is shown on the page] -->
            <div class="item active">


              <!-- #HERE -->
              <img src="/handsbwG.jpeg" alt="hands"/>
              <!-- /HERE -->


              <div class="carousel-caption">
                <h1>TEXT</h1>
              </div>
            </div>
          </div>

          <!-- controls or next and prev buttons -->

        </div>

      </div>
    </div>
  </div>
</template>

当我转到 localhost:3000/logo.ico 时，会显示图标（也适用于 localhost:3000/logo.png）。

不同的 SO 参考：

我的两个代码示例：

<link rel="icon" type="image/png" sizes="16x16 32x32" href="/logo.png">

<link rel="icon" sizes="16x16 32x32" href="/logo.ico?v=2">

【问题讨论】：

看这里：stackoverflow.com/questions/20054788/…

标签： javascript html meteor favicon

【解决方案1】：

文件必须命名为favicon.ico，仅此而已。将logo.ico 重命名为favicon.ico，它应该可以工作。

标题链接可能会指向一个不同命名的文件，但我怀疑您没有将它们放在正确的位置（流星可能很难知道真正用作标题的内容）。

【讨论】：

我将它重命名为 favicon.ico 并替换了 href="/favicon.ico?v=2" 但它仍然不起作用。 “但我怀疑你没有把它们放在正确的地方”是什么意思？也许这就是问题所在。
可能是您的浏览器正在积极缓存 favicon.ico。根据浏览器的不同，我在显示新的网站图标时遇到了困难。查看此相关问答：stackoverflow.com/questions/2208933/…

【解决方案2】：

Meteor looks for all head tags and combines them to one that is sent to the client. 这就是我在项目中添加的方式，

client/.../partials/head.html

没有模板标签或其他任何东西，可能只是额外的头部元素。

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="/img/favicon.png"/>
</head>

当然还有public/img/中的favicon

【讨论】：

【解决方案3】：

我尝试了很多方案并检查了与此相关的所有答案，但这对我不起作用，所以之后我使用下面的 JavaScript 代码解决了这个问题。

此代码正在动态更改网站图标图标。

(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);
})()

【讨论】：