345 votos

¿Dimensiones del Favicon?

Tengo un favicon con las dimensiones de height=26px / width=20px llamado favicon.png

<link href=http://www.example.com/images/favicon.png rel="shortcut icon" />

Sin embargo, en mi navegador, mi favicon.png está todo distorsionado.

Pregunta : ¿Se supone que mi favicon.png debe tener un tamaño determinado? Además, ¿puedo utilizar un tamaño/dimensión no estándar y, si es así, cómo?

568voto

philippe_b Puntos 2346

Respuesta corta

El favicon debe ser un conjunto de imágenes de 16x16, 32x32 y 48x48 en formato ICO . El formato ICO es diferente al PNG. Las imágenes no cuadradas no son compatibles.

Para generar el favicon, por muchas razones que se explican a continuación, te aconsejo que uses esto generador de favicon . Revelación completa: soy el autor de este sitio.

Respuesta larga y completa

El favicon debe ser cuadrado. Los navegadores de escritorio y Apple iOS no admiten iconos no cuadrados.

El favicon se apoya en varios archivos:

  • A favicon.ico icono.
  • Otros iconos PNG.

Para obtener los mejores resultados en los navegadores de escritorio (Windows/IE, MacOS/Safari, etc.), es necesario combinar ambos tipos de iconos.

favicon.ico

Aunque todos los navegadores de escritorio pueden lidiar con este icono, es principalmente para la versión antigua de IE.

El formato ICO es diferente del formato PNG. Este punto es complicado porque algunos navegadores son lo suficientemente inteligentes como para procesar una imagen PNG correctamente incluso cuando ha sido renombrada erróneamente con una extensión ICO.

Un archivo ICO puede contener varias imágenes y Microsoft recomienda poner versiones de 16x16, 32x32 y 48x48 del icono en favicon.ico . Por ejemplo, IE utilizará la versión 16x16 para la barra de direcciones, y la 32x32 para un acceso directo de la barra de tareas.

Declara el favicon con:

<link rel="icon" href="http://stackoverflow.com/path/to/icons/favicon.ico">

Sin embargo, se recomienda lugar favicon.ico en el directorio root del sitio web y a no declararlo en absoluto y dejar que los navegadores modernos elijan los iconos PNG.

Iconos PNG

Los navegadores de escritorio modernos (IE11, versiones recientes de Chrome, Firefox...) prefieren utilizar iconos PNG. Los tamaños habituales esperados son 16x16, 32x32 y "tan grande como sea posible". . Por ejemplo, MacOS/Safari utiliza el icono de 196x196 si es el más grande que puede encontrar.

¿Cuáles son las tallas recomendadas? Elige tus plataformas favoritas:

Los iconos PNG se declaran con:

<link rel="icon" type="image/png" href="http://stackoverflow.com/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="http://stackoverflow.com/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Cuidado: Firefox no admite el sizes y utiliza el último icono PNG que encuentra . Asegúrate de declarar la imagen de 32x32 en último lugar: es suficiente para Firefox, y eso evitará que descargue una imagen grande que no necesita. editar: arreglado en 2016.

También hay que tener en cuenta que Chrome no admite el sizes y tiende a cargar todos los iconos declarados . Mejor no declarar demasiados iconos. edit: arreglado en 2018.

Plataformas móviles

Esta pregunta es sobre el favicon de escritorio por lo que no es necesario ahondar demasiado en este tema.

Apple define el icono táctil para la plataforma iOS . iOS no admite iconos no cuadrados. Simplemente reescala las imágenes no cuadradas para hacerlas cuadradas (busca el ejemplo de Kioskea) .

Android Chrome se basa en el icono táctil de Apple y también define un icono PNG de 192x192 .

Microsoft define el cuadro de azulejos y el browserconfig.xml archivo .

Conclusión:

Generar un favicon que funcione en todas partes es bastante complejo. Te aconsejo que utilices este generador de favicon . Revelación completa: soy el autor de este sitio.

107voto

Mark Hurd Puntos 8193

16x16 píxeles, formato *.ico.

31voto

Otto Allmendinger Puntos 11853

Wikipedia tiene esto que decir:

Además, estos archivos de iconos pueden ser tener un tamaño de 16×16 o 32×32 píxeles y tener una profundidad de color de 8 o 24 bits profundidad de color (tenga en cuenta que los archivos GIF tienen una limitado, 256 entradas de paleta de colores).

Creo que lo mejor es utilizar un gif de 32x32 y probarlo con diferentes navegadores.

14voto

TiuTalk Puntos 3797

Todo lo que necesitas: http://www.favicon.cc/

1voto

UbiQue Puntos 107

El formato del favicon debe ser cuadrado, de lo contrario el navegador lo estirará. Desafortunadamente, Internet Explorer < 11 no soporta los tipos de archivo .gif, o .png, sino sólo el formato .ico de Microsoft. Puedes usar alguna aplicación "generadora de favicon" como: http://favicon-generator.org/

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X