La pantalla de sitios más populares en IE 10: los iconos no aparecen

Utilizamos el siguiente código para agregar íconos para favicon, tabletas, teléfonos inteligentes, mosaicos de Windows 8 y similares: -

<link rel="apple-touch-icon" href="apple-touch-icon.png">

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

<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<meta name="msapplication-TileImage" content="apple-touch-icon-144x144-precomposed.png"/>

<meta name="msapplication-TileColor" content="#17151a"/>

Desafortunadamente, esto no parece funcionar para IE9 y IE10 '' la pantalla de sus sitios más populares '', las búsquedas de Google no han sido esclarecedoras.

Stack utiliza lo <link rel="apple-touch-icon" href="apple-touch-icon.png">que parece funcionar para él, pero no para nosotros.

Cualquier pista a una solución apreciada.

ingrese la descripción de la imagen aquí

internet-explorer favicon MJWadmin
fuente

¿Falla solo en esta pantalla? p.ej. ¿El ícono se carga en la pestaña del navegador cuando se visita normalmente? Eso definitivamente no probaría nada, pero sería un poco informativo. De lo contrario, parece haber cubierto la situación del favicon bastante a fondo. No estoy seguro de que me preocupe demasiado por esto. Los navegadores han sido notoriamente descarados sobre la carga de favicons en general durante siglos. Además, ¿sucede para todos?

Su '

Ninguno de los íconos es 404'ing, y el favicon funciona en otros navegadores, al igual que los íconos táctiles. Este es uno de esos temas muy molestos de 'los avisos del presidente'. Después de pasar la mañana allí, la curiosidad y la frustración me han vencido.

MJWadmin

¿Has probado la imagen PNG real que usa la pila? ¿En caso de que haya alguna anomalía con el formato PNG en sí?

MrWhite

Otros navegadores no son relevantes aquí; Quise decir que el ícono se carga en pestañas regulares de IE. La falta de 404 tampoco te dirá nada. No tiene nada que ver con si la imagen está realmente allí o no. Los navegadores son generalmente volubles acerca de cargar favicons, punto; cuando se convierte en un problema, a menudo se puede hacer poco (borrar el caché y cualquier otra cosa que se te ocurra: podría funcionar, podría no serlo; ¡será una sorpresa!) Han mejorado con el tiempo, pero todavía sucede Firefox simplemente no pudo cargar un favicon en una pestaña para un sitio que ya está abierto en otra pestaña, con un icono.

Su '

¿Podría publicar un enlace al sitio web en los comentarios?

Respuestas:

¿Dónde está tu archivo ico? Puedo ver que está en la carpeta raíz, entonces no necesita la barra detrás de ella, elimine la barra detrás de su archivo, tampoco necesitatype="image/x-icon"

Su archivo ICO debe ser una biblioteca de iconos normal con diferentes tamaños de iconos necesarios.

<link rel="shortcut icon" href="favicon.ico"/>

Simplemente use el código anterior, funciona perfectamente para IE9, IE10, FX y Chrome.

Si antes tenía un favico diferente, también debe actualizar la memoria caché de su navegador .

Omne
fuente

suponiendo que el archivo esté realmente en la carpeta raíz, el problema es seguramente el archivo, no la etiqueta html como se muestra (a menos que haya otros errores html más abajo que causen problemas de IE). Mi etiqueta de enlace favicon está escrita como @MJWadmin y mi ícono se carga bien en las pestañas favoritas de IE9

WebChemist

¿Cuáles son las dimensiones de tu favicon? Consulte esta lista para asegurarse de que se encuentran dentro de estas pautas:

Personalizar el icono del sitio - Iconos del sitio en Internet Explorer 9

Editar

Mirando el código fuente de Stackoverflow, veo 2 imágenes de iconos:

<link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">

<link rel="apple-touch-icon" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">

Cuando miro mi stackoverflow en mi pestaña de favoritos en IE9, parece que está usando el favicon de 16x16 (y centrado en un contenedor de 32x32), no el icono de apple touchflow stackoverflow de 158x158 como sugirió porque si mira el png, el La relación de distancia de "relleno" desde el lado frente a la parte inferior es de aproximadamente 2.5: 1 donde como 1: 1 en el favicon, igual que el relleno de 1: 1 en la pestaña IE9 ...

Puedo decirle que el favicon de mi empleador se carga en los favoritos de IE9, y es 64x64 (sin transparencia, tamaño 12.5kb). Si aún no puede mostrar su favicon, publique un enlace para que podamos ver el archivo de imagen real

WebChemist
fuente

-1

Intente como Omne sugiere y elimine su atributo de tipo o agregue uno segundo con image / vnd.microsoft.icon como valor. Y luego asegúrese de que su servidor esté enviando el tipo mime para los archivos dot ico. Mira esto:

https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Alguna historia de fondo

Solía ser, o más bien se ha discutido sobre cuál es el tipo mime correcto para los iconos.

Microsoft World solía y probablemente todavía confía en "image / vnd.microsoft.icon" donde, como el resto del mundo, usa "image / x-icon" de manera no oficial (oficialmente) jajaja.

Desde el formato ICO de Wikipedia :

El tipo MIME registrado oficialmente por IANA para archivos ICO es image / vnd.microsoft.icon, registrado en 2003. Etiquetas erróneas "image / ico", "image / icon", "text / ico" y "application / ico", junto con el nombre no oficial "image / x-icon" estaban en uso en el momento del registro oficial y la asignación del tipo MIME.

todavía De wikipedia para Favicon

En 2003, el formato .ico se registró en la Autoridad de Números Asignados de Internet (IANA) bajo el tipo de imagen MIME / vnd.microsoft.icon. [12] Cuando se utiliza el formato .ico, Internet Explorer no puede mostrar archivos servidos con el tipo MIME estandarizado. Una solución alternativa para Internet Explorer es asociar .ico con el tipo MIME de imagen / x-icon no estándar en los servidores web.

Anthony Hatzopoulos
fuente