Can't load Favicon in Meteor
Question
I can't add a Favicon next to my website name in the tab. I have checked three SO posts and tried all possible combination. My logo.ico or logo.png file is in the " ProjectName/public " folder. From this folder I can access other images that load on the browser, if I link them like this:
<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>
When I go to localhost:3000/logo.ico the icon is shown (also for localhost:3000/logo.png).
Different SO References:
Two of my Code examples:
<link rel="icon" type="image/png" sizes="16x16 32x32" href="/logo.png">
<link rel="icon" sizes="16x16 32x32" href="/logo.ico?v=2">
3 answers
solution1
1 ACCPTED 2016-05-01 19:10:42
The file must to be named favicon.ico and nothing else. Rename logo.ico to favicon.ico and it should work.
The header links may work to point to a differently named file, but I suspect you are not putting them in the right place (meteor can be tricky in terms of knowing what will really get served as header).
solution2
1 2016-05-01 21:46:15
Meteor looks for all head tags and combines them to one that is sent to the client. This is how I add in my projects,
client/.../partials/head.html
No template tags or anything else, just maybe extra head elements.
<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>
and then ofcourse have the favicon in public/img/
solution3
0 2017-07-26 12:50:19
I have try many scenario and check all answer related to this but this is not working for me,So after that i used below JavaScript code for resolved this issue.
This code is changing website favicon icon dynamically.
(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);
})()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.