2011-11-18 12 views
8

Si puedo especificar diferentes tamaños de imagen PNG para favicon de este modo:¿Se han recuperado todos los tamaños de favicon del servidor?

<link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" /> 
<link rel="icon" type="image/png" sizes="24x24" href="/favicon-24px.png" /> 
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32px.png" /> 
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48px.png" /> 
<link rel="icon" type="image/png" sizes="64x64" href="/favicon-64px.png" /> 
<link rel="icon" type="image/png" sizes="256x256" href="/favicon-256px.png" /> 
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512px.png" /> 
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> 

hace cada uno de estos archivos se descabellada?

Respuesta

3

De acuerdo con specification, se usará el ícono más apropiado. Entonces no hay necesidad de buscar algo que no tiene uso.

Si se proporcionan varios iconos, el agente de usuario debe seleccionar el icono más apropiado de acuerdo con los atributos de tipo, medios y tamaños.

+1

La especificación solo dice que decidirá cuál usar. Sin embargo, si atrapa es solo una suposición. – chimerical

+2

Y no cuente con el icono más apropiado que se está buscando. Firefox parece obtener el más grande y luego lo escala. Internet Explorer no parece ser compatible con archivos PNG en absoluto. – Twilite

+0

Bueno, estoy de acuerdo, si no hay información explícita sobre la especificación, es probable que varíe de un navegador a otro, ya que el navegador puede descargar la que se va a usar o descargar todo en la memoria caché y usarla en el futuro (la menos presumible) . De todos modos, solo leer algunos registros de acceso responderá buena parte de la pregunta. –

5

Citando http://www.jonathantneal.com/blog/understand-the-favicon/:

¿Cómo estos navegadores PNG-favicon compatible determinar qué favicon se debe utilizar? Firefox y Safari usarán el favicon que viene último. Chrome para Mac utilizará el formato de ICO de cualquier favicon, o el favicon de 32 × 32. Chrome para Windows usará el favicon que aparece primero si es 16 × 16, de lo contrario el ICO. Si ninguna de las opciones mencionadas anteriormente está disponible, ambos Chromes usarán el favicon que sea lo primero, exactamente lo opuesto a Firefox y Safari. De hecho, Chrome para Mac ignorará el favicon de 16 × 16 y utilizará la versión 32 × 32 , aunque solo sea para reducirla a 16 × 16 en dispositivos que no sean retina. Opera, sin querer tomar partido, elegirá entre cualquiera de los iconos disponibles al azar completo. Me encanta que Opera haga esto.

Y eso es solo el comienzo. Ahora es el momento de conocer las advertencias de Internet Explorer .

Mientras IE8-10 mostrará el favicon en la primera carga de la página, Internet Explorer 7 se saltará la primera carga y mostrar el favicon durante las visitas repetidas. Peor aún, IE6 solo mostrará el favicon una vez que el sitio haya sido marcado y reabierto en el navegador . IE6 también soltará el favicon cada vez que se borre el caché del navegador , y no volverá a mostrar el favicon hasta que el sitio se vuelva a marcar como favorito, o el favicon se recargue de alguna manera. Si IE6 y favicons significan mucho para usted, puede forzar esta recarga con un pequeño fragmento de código JavaScript , preferiblemente envuelto en un comentario condicional .

<!-- I "support" IE6 --> 
<!--[if IE 6]><script>(new Image).src="path/to/favicon.ico"</script><![endif]--> 
+0

Si alguien puede proporcionar más detalles (como se describe arriba), por favor. Preferiría premiar la recompensa con alguien más. –

-1

El navegador obtendrá sólo un archivo, si lo hay.

2

Sorprendentemente, he observado que algunos navegadores se cargan todos los favicons PNG, no sólo el más adecuado uno:

  • Chrome en Windows
  • Chrome en Android
  • Firefox en Windows

No probé otras configuraciones, como Firefox en Android.

Más información acerca del "all favicons are loaded" issue.

Cuestiones relacionadas