无法在 Meteor 中加载 Favicon
Can't load Favicon in Meteor
我无法在选项卡中的网站名称旁边添加网站图标。我检查了三个 SO 帖子并尝试了所有可能的组合。我的 logo.ico 或 logo.png 文件位于“ProjectName/public”文件夹中。从这个文件夹我可以访问在浏览器上加载的其他图像,如果我 link 它们像这样:
<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 引用:
- Ref 1
- Ref 2
- Ref 3
我的两个代码示例:
<link rel="icon" type="image/png" sizes="16x16 32x32" href="/logo.png">
<link rel="icon" sizes="16x16 32x32" href="/logo.ico?v=2">
文件 必须 命名为 favicon.ico
,别无其他。将 logo.ico
重命名为 favicon.ico
,它应该可以工作。
header 链接可能会指向一个不同名称的文件,但我怀疑您没有将它们放在正确的位置(流星可能很难知道什么真正会被用作 header).
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/
中的图标
我尝试了很多场景并检查了所有与此相关的答案,但这对我不起作用,所以之后我使用下面的 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.whosebug.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
})()
我无法在选项卡中的网站名称旁边添加网站图标。我检查了三个 SO 帖子并尝试了所有可能的组合。我的 logo.ico 或 logo.png 文件位于“ProjectName/public”文件夹中。从这个文件夹我可以访问在浏览器上加载的其他图像,如果我 link 它们像这样:
<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 引用:
- Ref 1
- Ref 2
- Ref 3
我的两个代码示例:
<link rel="icon" type="image/png" sizes="16x16 32x32" href="/logo.png">
<link rel="icon" sizes="16x16 32x32" href="/logo.ico?v=2">
文件 必须 命名为 favicon.ico
,别无其他。将 logo.ico
重命名为 favicon.ico
,它应该可以工作。
header 链接可能会指向一个不同名称的文件,但我怀疑您没有将它们放在正确的位置(流星可能很难知道什么真正会被用作 header).
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/
我尝试了很多场景并检查了所有与此相关的答案,但这对我不起作用,所以之后我使用下面的 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.whosebug.com/favicon.ico';
document.getElementsByTagName('head')[0].appendChild(link);
})()