Favicon wird nicht angezeigt für die erste Zeit

Ich habe Aufbau einer AngularJS Single Page Anwendung, und es funktioniert gut, aber Sie hat ein problem: wenn die website lädt zum ersten mal, das favicon nicht angezeigt. Wenn ich die Seite neu laden, es zeigt sich schließlich bis. Es funktioniert auf jedem web-browser, wenn ich getestet: Mozilla Firefox, Google Chrome, Chromium, IE 9, Android browser, Safari für iPhone.

Dies ist der Allgemeine Teil des SPA:

<!DOCTYPE html>
<html lang="en" data-ng-app="vannApp" >
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="Vanntile Ianito" name="author">
    <base href="file:///home/vanntile/Documents/doc/WEB_DEVELOPING/Vann_Original/index.html">

    <link rel="shortcut icon" href="icon/favicon.ico">
    <link rel="apple-touch-icon" sizes="57x57" href="icon/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="icon/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="icon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="icon/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="icon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="icon/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="icon/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="icon/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="icon/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" href="icon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="icon/favicon-194x194.png" sizes="194x194">
    <link rel="icon" type="image/png" href="icon/favicon-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="icon/android-chrome-192x192.png" sizes="192x192">
    <link rel="icon" type="image/png" href="icon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="icon/manifest.json">

    <title>Website Title</title>

    <link href="css/vannstyle.min.css" rel="stylesheet">
    <script src="js/angular/angular.min.js"></script>
    <script src="js/angular/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="js/angular/angular-route.min.js"></script>
    <script src="js/angular/angular-animate.min.js"></script>
    <script src="js/angular/index.js"></script>

</head>
<body>
    <p>This is some text. I could have thought of something better, but I'm lazy.</p>
</body>
</html>

Die favicons sind mit Real favicon Generator. Und die Microsoft-Fliesen sind aus mit: Windows 8.1 Kachel. Sie sind nicht in der Wurzel der website, aber in /Symbol.

Jede Hilfe würde geschätzt werden. Vielen Dank im Voraus.

Es verschiebt sich von browser zu browser. Es ist das erwartete Verhalten
Aber es hat das gleiche Verhalten auf alle der oben genannten Browser...
Versuchen Sie das favicon in das root-Verzeichnis (/favicon.ico statt icon/favicon.ico), ändern Sie Ihren code entsprechend, deaktivieren Sie den cache Ihres Browsers, und sehen, ob es einen Unterschied macht.

InformationsquelleAutor VannTile Ianito | 2015-04-18

  1. 5

    Müssen Sie die favicon.ico meta-tag zum ersten mal aus dem favicon-meta-tags. Überprüfen Sie die google-Seite als Beispiel:

    <!DOCTYPE html>
<html lang="en" data-ng-app="vannApp" >
<head>
   <meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image">
   <link href="/images/branding/product/ico/googleg_lodp.ico" rel="shortcut icon">

    InformationsquelleAutor Adolf Ochi Dulci

  2. 2

    Kann es sein, dass das favicon nicht in der Wurzel der Website. Versuchen Sie, Ihre Ordner und sehen, ob es immer noch passiert.

    Vereinbart. Name it favicon.ico und steckte es in das root-Verzeichnis. Browser automatisch wissen, zu sehen, dass für die Datei in das root auch ohne link.

    InformationsquelleAutor

Schreibe einen Kommentar