Favicon ne s'affiche pas pour la première fois

J'ai créer une AngularJS Single Page Application et il fonctionne très bien, mais il a un problème: lorsque le site se charge pour la première fois, le favicon ne s'affiche pas. Si je recharge la page, il montre enfin. Il fonctionne de la même façon sur tous les navigateur web où j'ai testé: Mozilla Firefox, google Chrome, le Chrome, IE 9, Android navigateur Safari de l'iPhone.

C'est la partie commune de la 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>

Les favicons sont faites avec Real favicon Generator. Et Microsoft de carreaux sont fabriqués avec: Windows 8.1 tuile. Ils ne sont pas à la racine du site, mais dans /icône.

Toute aide serait appréciée. Je vous remercie à l'avance.

Il diffère d'un navigateur à l'autre. C'est le comportement attendu
Mais il a le même comportement sur tout le dessus de navigateurs...
Essayez de placer le favicon dans le répertoire racine (/favicon.ico au lieu de icon/favicon.ico), modifier votre code en conséquence, supprimer le cache du navigateur, et voir si cela fait une différence.

OriginalL'auteur VannTile Ianito | 2015-04-18

  1. 5

    Vous devez avoir mis le favicon.ico balise meta de la première à la favicon balises meta. Vérifiez la page de google comme exemple:

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

    OriginalL'auteur Adolf Ochi Dulci

  2. 2

    Il se peut que le favicon n'est pas placé dans la racine du site. Essayez de changer leur dossier et voir si il arrive encore.

    D'accord. Nom il favicon.ico et le mettre dans le répertoire racine. Les navigateurs automatiquement savoir rechercher ce fichier à la racine même sans lien de référence.

    OriginalL'auteur