html - convertir - Favicon NO trabaja en Edge
real fav icon generator (11)
Tengo un problema con este favicon que generé para un proyecto de php de servidor local. Funciona bien en la mayoría de los navegadores (Google Chrome, Mozilla Firefox y Opera) pero en Microsoft Edge no funciona (muestra el icono de la pestaña predeterminada).
He intentado muchas soluciones a este problema, como borrar el caché, usar el formato de imagen (.png) en lugar del icono (.ico), pero nada parece funcionar.
Aquí están las líneas de código que he incluido en el encabezado 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" />
¿Alguien tuvo el mismo problema y lo resolvió?
Agregando Cache-Control: public, max-age = 14400 al encabezado http que funcionó para mí. Lo comprobé con IE, Edge y Chrome en Windows 10 usando un ESP8266-12E que ejecuta Arduino como un servidor web en una red local. (Todavía no he probado ningún soporte específico de Apple o Android). FWIW - Aquí hay parte del html de la página raíz de mi servidor:
<!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>
y aquí hay un fragmento de código ESP8266 / Arduino para crear el encabezado http en la respuesta y enviar los datos del ícono almacenados previamente como un archivo utilizando 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();
...
Debes cambiar el nombre de tu archivo favicon.ico. Me gusta "myFavicon.ico".
También debe agregar ? Al final de tu enlace, así:
<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" />
Además, ¿actualizaste el caché antes de probar? De lo contrario, reinicie el caché o no verá los cambios.
Por último, también podría ser su icono. Trate de usar un generador de favicon .
Hay 2 problemas en Edge. Ambos se evitan cuando se implementa en un servidor web (es por eso que comenzó a trabajar en otras respuestas después de implementarse en un servidor web). Sin embargo, también puedes hacer que funcione en localhost.
1. Encabezados incompletos devueltos desde el servidor
Parece que para Edge el servidor web tiene que devolver el encabezado Cache-Control para el favicon.
Por ejemplo, este valor funciona:
Cache-Control: public, max-age=2592000
Los servidores web comunes probablemente envíen ese encabezado automáticamente. Sin embargo, si tiene alguna solución personalizada, debe implementarla manualmente. Por ejemplo, en WCF:
WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");
2. Edge no puede acceder a localhost debido a algunas configuraciones de seguridad de Windows
De forma predeterminada, las aplicaciones de la tienda de Windows no pueden usar la interfaz de bucle invertido. Esto parece afectar la carga de favicon, que se carga utilizando otro medio que la página web solo (por lo tanto, incluso si la página web funciona, el favicon no funciona).
Para habilitar loopback para Edge, ejecute esto en PowerShell como administrador:
CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
No es necesario reiniciar el borde: después de la actualización de la página (F5), se debe cargar el favicon.
Para deshabilitar el bucle de nuevo:
CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"
El favicon se almacenará en caché en Edge, por lo que seguirá siendo visible.
Otra información
Si utiliza HTTPS, parece que el certificado debe ser válido (de confianza) para que se muestre el icono.
Intenta crear un 512x512 en formato PNG. Trabajó para mi.
Para mí, el problema era que en localhost nunca funcionó en Edge. No importa lo que hice. Siempre estuvo bien en Chrome y Firefox. La solución fue que solo funcionaba en Edge después de que lo implementara en el servidor web.
Primero, intente el método habitual de corrección: borrar caché, historial y cookies.
Si eso no funciona, intente:
<html>
<head>
<title> Your Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body> Your content </body>
</html>
Asegúrese de que favicon.ico esté en la misma carpeta que su archivo html.
Si aún no funciona, puede ser un problema con MS Edge. Visite el sitio web a continuación: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87
Puede ser que tu favicon sea demasiado grande. De acuerdo con la respuesta en el hilo de este enlace, un favicon debe ser 16 x 16 px: https://forum.yola.com/yola/topics/edge-not-displaying-favicon
En mi sitio web (loekbergman.nl) está funcionando y tengo un ícono de 16x16px de hecho.
Tal vez sea un problema de encapsulación de eco. Quiero decir que href tendría "request-> baseUrl;" como un valor
tratar
<?php
echo ''<link rel="icon" href="''.Yii::$app->request->baseUrl.''/favicon.ico" type="image/x-icon" />'';
?>
Tuve el mismo problema con Edge. He intentado muchas soluciones alternativas, pero solo se ha logrado mover el icono del servidor local al servidor www. Si su servidor es local (en localhost), intente mover el archivo de icono a un servidor global.
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />
para mí he añadido id = "favicon"
toda la línea parece
<link id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon" />
Solución para EDGE
TL; DR;Aloje sus imágenes favicon externamente.
Si aún no tiene un favicon, puede generarlos here o here .
He cargado mi png 32x32 en imgur.com. ¡Funciona durante las pruebas locales solo si la imagen de favicon / png está alojada externamente! , como imgur.com .
En la head de la página configuro el favicon así:
<link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">
No hay una convención de nombres, puedes nombrar el favicon como xyz.png pero supongo que tiene que ser 32x32!
También he configurado una entrada de hosts apunta a mi aplicación web en IIS como:
127.0.0.1 www.your-app.com
Pasos: Cierre el navegador, espere 30 segundos y vuelva a abrirlo .
Ingrese su url como: www.your-app.com o localhost/yourApp o localhost:xxxx/yourApp .
Intenta ambos!
Asegúrese de borrar la memoria caché. Pulsa F5. Probablemente deba repetir estos pasos, dos o tres veces.
Tomará algún tiempo para que Edge lo agarre.
Esto funciona en IIS. Después de eso lo he probado con IIS Express y también funciona allí. No importa. Lo que importa es que tienes que alojar el favicon externamente .
Por ejemplo, IE11 no muestra favicons en absoluto, independientemente del sitio que visite. Entonces, olvídate de IE11 ;-)
