Favicon ne travaille pas sur le bord
j'ai un problème avec ce favicon que j'ai généré pour un projet php de serveur local. Il fonctionne très bien sur la plupart des navigateurs (Google Chrome, Mozilla Firefox et Opera), mais sur Microsoft Edge il ne fonctionne pas (il affiche l'onglet par défaut favicon).
j'ai essayé de nombreuses solutions à ce problème comme nettoyer le cache, en utilisant le format image (.png) au lieu de l'icône (.ico), mais rien ne semblait fonctionner.
Voici les lignes de code que J'ai incluses dans le HTML tête:
<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 le même problème et l'a résolu?
11 réponses
pour moi le problème était que sur localhost il n'a jamais fonctionné dans Edge. Peu importe ce que j'ai fait. C'était toujours bien dans le Chrome et le Firefox. La solution était qu'il ne fonctionnait à Edge qu'après mon déploiement sur le webserver.
J'ai eu le même problème avec Edge. J'ai essayé beaucoup de solutions, mais seulement le déplacement de l'icône du local au serveur web a été couronnée de succès. Si votre serveur est local (localhost), essayez de déplacer le fichier icon vers un serveur global.
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
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 le faire fonctionner sur localhost, trop.
1. Headers incomplets retournés depuis le serveur
il semble que pour Edge le serveur web doit retourner L'en-tête Cache-Control pour le favicon.
E. g. cette valeur fonctionne:
Cache-Control: public, max-age=2592000
les serveurs web communs probablement envoyer l'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 à cause de certains paramètres de sécurité de Windows
par défaut, les applications Windows store ne peuvent pas utiliser l'interface loopback. Cela semble affecter le chargement de favicon, qui est chargé en utilisant un autre moyen que la page Web seule (donc, même si la page Web fonctionne, favicon ne travail.)
pour activer le loopback pour Edge, exécutez ceci dans PowerShell en tant qu'administrateur:
CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
le redémarrage de bord n'est pas nécessaire - après le rafraîchissement de la page (F5), le favicon doit être chargé.
Pour désactiver le bouclage de nouveau:
CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
le favicon sera mis en cache dans Edge, donc il sera toujours visible.
Autres informations
si vous utilisez HTTPS, il semble que le certificat doit être valide (de confiance) pour que le favicon montrer.
vous devriez changer le nom de votre favicon.fichier 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 rafraîchi le cache avant de le tester? Si pas, réinitialiser le cache, ou vous ne verrez pas vos modifications.
Enfin, il pourrait aussi être votre icône. Essayez d'utiliser un générateur de favicon.
pour moi, j'ai ajouté id="favicon"
toute la ligne ressemble à
<link id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />il se peut que votre favicon soit trop grand. Selon la réponse dans le fil dans ce lien si une favicon est 16 x 16 px: https://forum.yola.com/yola/topics/edge-not-displaying-favicon
Dans mon site (loekbergman.nl) de travail et j'ai un 16x16px icône en effet.
tout d'abord, essayez la méthode de fixation habituelle: effacer le cache, l'histoire 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 de favicon.ico est dans le le dossier comme votre fichier html.
si cela ne fonctionne toujours pas, cela pourrait ê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
Ajout Cache-Control: public, max-age=14400 à l'en-tête http a fonctionné pour moi. Vérifié avec IE, Edge et Chrome sur Windows 10 en utilisant un ESP8266-12E tournant Arduino comme serveur web sur un réseau local. (Je n'ai pas encore essayé de support spécifique à Apple ou Android). FWIW - Voici la 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 pour créer l'en-tête http dans la réponse et envoyer les données de l'icône précédemment stocké 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();
...
Solution de BORD
TL;DR;
hébergez vos images favicon à l'extérieur.
Si vous n'avez pas de favicon déjà, vous pouvez les générer ici ou ici.
j'ai téléchargé mon 32x32 png imgur.com
Il fonctionne pendant les essais locaux si l'image favicon/png est hébergée !extérieurement!, comme imgur.com.
Dans le head de la page j'ai mis le favicon comme ceci:
<link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">
il n'y a pas de convention de nommage, vous pouvez nommer le favicon tout ce que vous voulez xyz.png mais j'imagine que ça doit être 32x32!
j'ai également l'installation d'un hosts entrée pointant vers mon application web dans IIS de la forme:
127.0.0.1 www.your-app.com
Mesures: fermez le navigateur, attendez 30 secondes et réouvrez-le.
Saisissez votre url soit comme:
www.your-app.com ou
localhost/yourApp ou
localhost:xxxx/yourApp.
essayez les deux!
assurez-vous de vider le cache. Appuyez Sur La Touche F5. Vous devez probablement répéter ces étapes, deux ou trois fois.
il faudra un certain temps à Edge pour le saisir.
cela fonctionne dans IIS. Après cela, je l'ai testé avec IIS Express et il fonctionne là aussi. Il n'a pas d'importance. Ce qui importe est, vous devez héberger le favicon extérieurement.
Par exemple, IE11 ne montre pas de favicons du tout, quel que soit le site que je visite.
Donc, oubliez IE11 ;-)
c'est Peut-être un echo l'encapsulation problème. Je veux dire que href aurait "request - > baseUrl;" comme valeur
<?php
echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
?>
essayez de créer un 512x512 au format PNG. A travaillé pour moi.