2016-05-01 10 views
2

Ich kann nicht ein Favicon neben meinem Website-Namen in der Registerkarte hinzufügen. Ich habe drei SO-Posts überprüft und alle möglichen Kombinationen ausprobiert. Meine logo.ico oder logo.png Datei befindet sich im Ordner "ProjectName/public". Aus diesem Ordner kann ich andere Bilder zugreifen, die auf dem Browser zu laden, wenn ich sie so verlinkt:Kann Favicon in Meteor nicht laden

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

Als ich nach localhost gehen: 3000/logo.ico wird das Symbol (auch für localhost gezeigt: 3000/logo.png).

Verschiedene SO Referenzen:

Zwei meiner Code-Beispiele:

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

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

sehen alaning hier: http://stackoverflow.com/questions/20054788/how-to-load-a-favicon-with-meteor –

Antwort

1

Die Datei muss heißen favicon.ico und nichts anderes. Rename logo.ico zu favicon.ico und es sollte funktionieren.

Die Header-Links funktionieren möglicherweise, um auf eine anders benannte Datei zu zeigen, aber ich vermute, dass Sie sie nicht an der richtigen Stelle setzen (Meteor kann schwierig sein, zu wissen, was wirklich als Header serviert wird).

+0

ich es umbenannt favicon.ico und ersetzt href = "/ favicon.ico? v = 2 "aber es funktioniert immer noch nicht. Was meinst du mit "aber ich vermute, du bringst sie nicht an den richtigen Ort"? Vielleicht ist das das Problem. – LenC

+0

Es kann sein, dass Ihr Browser das favicon.ico aggressiv zwischenspeichert. Je nach Browser habe ich Schwierigkeiten, ein neues Favicon zur Anzeige zu bringen. Sehen Sie sich diese Fragen und Antworten an: http://StackOverflow.com/questions/2208933/how-do-i-force-a-favicon-refresh – HeadCode

1

Meteor looks for all head tags and combines them to one that is sent to the client. Dies ist, wie ich in meinen Projekten hinzufügen

client/.../partials/head.html 

Keine Template-Tags oder irgendetwas anderes, nur vielleicht zusätzliche Kopfelemente.

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

und dann haben natürlich das Favicon in public/img/

0

Ich versuche, alle im Zusammenhang mit dieser Antwort viele Szenario haben und prüfen, aber das funktioniert nicht für mich, also nach, dass ich im Folgenden verwendeten JavaScript-Code für dieses Problem gelöst Problem.

Dieser Code ändert das Favicon-Symbol der Website dynamisch.

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