CODEWITHSUNDEEP
javascripthtmlmeteorfavicon
LenC
LenC

Reputation: 89

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

Upvotes: 2

Views: 1606

Answers (4)

Ryan Le
Ryan Le

Reputation: 1

I ran into this issue and found that moving the favicon.ico file into the root of the public/ directory resolved this for me. No dice in a /public/img directory.

I used the below and it instantly worked; nothing further was necessary (didn't have to clear cache/history in Chrome).

<link rel="shortcut icon" href="/favicon.ico?v=2" />

Upvotes: 0

Harish Bansode
Harish Bansode

Reputation: 102

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

Upvotes: 0

alfiepoleon
alfiepoleon

Reputation: 2061

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/

Upvotes: 1

Christian Fritz
Christian Fritz

Reputation: 21374

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

Upvotes: 1

Related Questions