LenC LenC - 7 months ago 25
Javascript Question

Can't load Favicon in Meteor

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">

Answer

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).

Comments