web-dev-qa-db-fra.com

Favicon ne fonctionne pas sur Edge

J'ai un problème avec ce favicon que j'ai généré pour un projet php de serveur local. Cela fonctionne très bien sur la plupart des navigateurs (Google Chrome, Mozilla Firefox et Opera), mais sous Microsoft Edge, il ne fonctionne pas (il affiche le favicon de l'onglet par défaut).

J'ai essayé de nombreuses solutions à ce problème, comme effacer le cache, utiliser le format d'image (.png) à la place de l'icône (.ico), mais rien ne semblait fonctionner.

Voici les lignes de code que j'ai incluses dans l'en-tête HTML:

<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />

Quelqu'un a eu le même problème et l'a résolu?

htmliconsmicrosoft-edgefavicon
42
Ragheb AlKilany

Pour moi, le problème était que sur localhost, cela ne marchait jamais dans Edge. Peu importe ce que j'ai fait. C’était toujours correct dans Chrome et Firefox. La solution était que cela ne fonctionnait que dans Edge après le déploiement sur le serveur Web.

54
Yster

Il y a 2 problèmes dans Edge. Les deux sont évités lors du déploiement sur un serveur Web (c'est pourquoi il a commencé à fonctionner dans une autre réponse après le déploiement sur un serveur Web). Cependant, vous pouvez également le faire fonctionner sur localhost.

1. En-têtes incomplets renvoyés par le serveur

Il semble que pour Edge, le serveur Web doit renvoyer l'en-tête Cache-Control pour l'icône fav.

Par exemple. cette valeur fonctionne:

Cache-Control: public, max-age=2592000

Les serveurs Web courants envoient probablement cet en-tête automatiquement. Cependant, si vous avez une solution personnalisée, vous devez l'implémenter manuellement. Par exemple. en WCF:

WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");

2. Edge ne peut pas accéder à localhost en raison de certains paramètres de sécurité Windows

Par défaut, les applications du Windows Store ne peuvent pas utiliser l'interface de bouclage. Cela semble affecter le chargement de favicon, qui est chargé à l'aide d'un autre moyen qui signifie que la page Web est seule (ainsi, même si la page Web fonctionne, la favicon ne fonctionne pas).

Pour activer le bouclage pour Edge, exécutez cette opération dans PowerShell en tant qu'administrateur:

CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Le redémarrage Edge n'est pas nécessaire - après l'actualisation de la page (F5), l'icône favicon doit être chargée.

Pour désactiver à nouveau le bouclage:

CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Le favicon sera mis en cache dans Edge, il sera donc toujours visible.

Autres infos

Si vous utilisez HTTPS, il semble que le certificat doit être valide (approuvé) pour que l'icône de favicon s'affiche.

13
Milan Laslop

J'ai eu le même problème avec Edge. J'ai essayé beaucoup de solutions de contournement, mais seul le déplacement de l'icône d'un serveur local vers un serveur www a réussi. Si votre serveur est local (à l'hôte local), essayez de déplacer le fichier d'icône sur un serveur global.

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
9
Valentin Safonnikov

pour moi j'ai ajouté id = "favicon"

toute la ligne ressemble à

    <link  id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon"  />
4
Dotnetsqlcoder

Vous devriez changer le nom de votre fichier favicon.ico. Comme "myFavicon.ico".

Vous devriez aussi ajouter ? à la fin de votre lien, comme ceci:

<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />

Aussi, avez-vous actualisé le cache avant de tester? Sinon, réinitialisez le cache ou vous ne verrez pas vos modifications.

Enfin, cela pourrait aussi être votre icône. Essayez d'utiliser un générateur de favicon .

3
David G

Il se peut que votre favicon soit trop gros. Selon la réponse dans le fil de ce lien, un favicon de 16 x 16 px: https://forum.yola.com/yola/topics/Edge-not-displaying-favicon

Sur mon site Web (loekbergman.nl) cela fonctionne-t-il et j'ai effectivement une icône 16x16px.

2
Loek Bergman

Tout d’abord, essayez la méthode de fixation habituelle: effacer le cache, l’historique et les cookies.

Si cela ne fonctionne pas, essayez:

<html>    
<head>
<title> Your Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body> Your content </body>
</html>

Assurez-vous que favicon.ico est dans le même dossier que votre fichier html.

Si cela ne fonctionne toujours pas, c'est peut-être un problème avec MS Edge. Consultez le site Web ci-dessous: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

1
Yubin Lee

L'ajout de Cache-Control: public, max-age = 144 à l'en-tête http a fonctionné pour moi. Vérifié avec IE, Edge et Chrome sous Windows 10 avec un ESP8266-12E exécutant Arduino en tant que serveur Web sur un réseau local. (Je n'ai pas essayé de Apple ou encore le support spécifique à Android). FWIW - Voici une partie du code HTML de la page racine de mon serveur:

<!DOCTYPE html>
<html>
<head>
<title>Favicon Test</title>
<link rel="shortcut icon" href="/faviconS.ico" type="image/x-icon">
<link id="favicon" rel="icon" href="/favicon.ico" type="image/x-icon">
<link id="favicon-16x16" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link id="favicon-32x32" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link id="favicon-96x96" rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
</head>
<body>
...
</body>
</html>

et voici un extrait de code ESP8266/Arduino permettant de créer l'en-tête http dans la réponse et d'envoyer les données d'icône précédemment stockées sous forme de fichier à l'aide de SPIFFS.

...
f = SPIFFS.open("/favicon.ico", "r");
if (!f) {
  Serial.println("file open failed");
} else {
  Serial.println("favicon.ico open succeeded...");
  client.println("HTTP/1.1 200 OK");
  client.print("Content-Length:");
  client.println(String(f.size()));
  client.println("Content-Type:image/x-icon");
  client.println("Cache-Control: public, max-age=14400");
  client.println();  // blank line indicates end of header
  while (f.available()) {  // send the binary for the icon
    byte b = f.read();
    client.write(b);
  }
f.close();
...
1
Tom S

J'ai eu le même problème et comment j'ai résolu comme ci-dessous.

  • Le nom de l'icône doit être favicon. J'ai utilisé .ico. (Un nom différent ne fonctionnait pas pour moi)

  • L'icône de favicon doit se trouver dans le dossier racine où se trouve votre HTML. (Voici la structure de mon dossier)

    -- src
   -- app
      -- images
      -- css
      -- favicon.ico
      -- index.html

  • inclure une icône en HTML

    <link rel="icon" href="./favicon.ico" type="image/x-icon">

J'ai testé et corrigé mon problème dans les navigateurs ci-dessous

  • Chrome (version 76.0.3809.100)
  • Firefox (version 68.0.1)
  • Safari (version 11.1)
  • Internet Explorer (versions 11 et 10)
  • Edge (version 42.17134.1.0)
0
Hardik Shah

Peut-être que c'est un problème d'écho encapsulation. Je veux dire que href aurait "request-> baseUrl;" comme une valeur

essayer

  <?php
      echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
  ?>
0
Valérian Polizzi

Suivez ces étapes

  1. Le nom de l'image doit être favicon.ico et le format doit être ico
  2. Placez l'ico dans le dossier "wwwroot"

  3. ico reference in index.html devrait être

    "<link rel =" icon "type =" image/x-icon "href ="/favicon.ico ">"

  4. Edge ne montre pas de favicon lors de l'exécution à partir de local. Déployer sur le serveur Web et essayer

Cela a fonctionné pour moi

0
Ganesh Arasapaharan