¿Dimensiones del Favicon?

Tengo un favicon con las dimensiones de altura = 26px / ancho = 20px llamado favicon.png

 

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

Pregunta : ¿Se supone que mi favicon.png tiene un tamaño particular? Además, ¿puedo usar un tamaño / dimensión no estándar y, de ser así, cómo?

Respuesta corta

Se supone que el favicon es un conjunto de imágenes de 16×16, 32×32 y 48×48 en formato ICO . El formato ICO es diferente de PNG. Las imágenes no cuadradas no son compatibles.

Para generar el favicon, por muchas razones que se explican a continuación, le aconsejo que use este generador de favicon . Divulgación completa: soy el autor de este sitio.

Respuesta larga y completa

Favicon debe ser cuadrado. Los navegadores de escritorio y Apple iOS no admiten icons que no sean cuadrados.

El favicon es compatible con varios archivos:

  • Un icono de favicon.ico .
  • Algunos otros íconos PNG.

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

favicon.ico

Aunque todos los navegadores de escritorio pueden tratar con este icono, es principalmente para la versión anterior 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 se renombró erróneamente con una extensión ICO.

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

Declara el favicon con:

  

Sin embargo, se recomienda colocar favicon.ico en el directorio raíz del sitio web y no declararlo en absoluto y dejar que los navegadores modernos elijan los icons PNG.

Iconos de PNG

Los navegadores de escritorio modernos (IE11, versiones recientes de Chrome, Firefox …) prefieren usar icons PNG. Los tamaños habituales esperados son 16×16, 32×32 y “lo más grande posible” . Por ejemplo, MacOS / Safari usa el icono 196×196 si es el más grande que puede encontrar.

¿Cuáles son los tamaños recomendados? Elija sus plataformas favoritas:

  • La mayoría de los navegadores de escritorio: 16×16, 32×32, “lo más grande posible”
  • Android Chrome: 192×192
  • Google TV: 96×96
  • … y otros que están más o menos documentados.

Los icons PNG se declaran con:

   ... 

Cuidado: Firefox no admite el atributo de sizes y utiliza el último icono de PNG que encuentra . Asegúrate de declarar la imagen de 32×32 al final: es lo suficientemente buena para Firefox, y eso evitará que descargue una imagen grande que no necesita.

También tenga en cuenta que Chrome no admite el atributo de sizes y tiende a cargar todos los icons declarados . Mejor no declarar demasiados icons.

Plataformas móviles

Esta pregunta se trata de favicon de escritorio, por lo que no hay necesidad de profundizar demasiado en este tema.

Apple define el icono táctil para la plataforma iOS . iOS no admite ícono que no sea cuadrado. Simplemente vuelve a escalar las imágenes no cuadradas para que sean cuadradas (busque el ejemplo de Kioskea) .

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

Microsoft define la imagen del mosaico y el archivo browserconfig.xml .

Conclusión

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

16×16 píxeles, formato * .ico.

2018 standards gracias a faviconit

Uso faviconit.com para obtener el mejor soporte de navegador y dispositivo posible. Usted carga una imagen y este sitio le proporciona el código, las imágenes convertidas y un archivo browserconfig.


Simplemente podríamos subir un favicon de forma manual a nuestro sitio web de 16×16 y probablemente se muestre en casi cualquier navegador.

Pero cuando lo marque como uno de sus favoritos en su teléfono inteligente o tableta, necesitaremos imágenes más grandes (60×60 a 144×144).

Y digamos que uno de nuestros usuarios crea un acceso directo en su escritorio. En ese caso, un 196×196 se ve mejor!


Código de ejemplo de lo que le daría faviconit, junto a todas las imágenes convertidas:

                   

Desde Windows 8

Pero eso no es todo. ¡Desde Windows 8 podemos crear accesos directos a sitios web con mosaicos!

     

Browserconfig.xml

Cargue un archivo llamado browserconfig.xml (para habilitar los mosaicos en Windows> 8)

       #FFFFFF    

Wikipedia tiene esto que decir:

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

Creo que la mejor manera es usar un gif de 32×32 y probarlo con diferentes navegadores.

La solución más simple es usar una (!) Imagen PNG (en 2018).

Simplemente agregue esto al principio de su documento:

    

El último enlace es para Apple (pantalla de inicio), el segundo para Android (pantalla de inicio) y el primero para el rest.

Tenga en cuenta que esta solución NO admite “teselas” en Windows 8/10. SOPORTA imágenes en accesos directos, marcadores y tabs del navegador.

favicon.ico es 16×16

  

Y uso estos para ser hermoso en dispositivos móviles y tabletas:

     

Es importante usar el nombre “favicon.ico” en la raíz porque muchos navegadores intentarán encontrarlo primero.

Parece que tu archivo debe ser de tipo .ico .

Mira esta publicación sobre favicons:

http://www.html-kit.com/support/favicon/image-size/

No, no puede usar un tamaño o una dimensión no estándar, ya que causaría esgulps en los navegadores de las personas dondequiera que se muestren los íconos. Podrías hacerlo 12×16 (con cuatro píxeles de relleno blanco / transparente en el lado de 12 píxeles) para preservar tu relación de aspecto, pero no puedes ir más grande (bueno, puedes, pero el navegador lo reducirá).

Un favicon para un sitio web normalmente tiene que ser un archivo * .ico y puede ser 32×32 o 16×16. Usar un tamaño no estándar no funcionará en todos los navegadores, y aparecerá todo distorsionado como usted mismo. Intente y convierta esa imagen usando este sitio: http://www.favicon.cc/ y luego intente y use?

el formato de la imagen que ha elegido debe ser de 16×16 píxeles o 32×32 píxeles, utilizando colores de 8 bits o de 24 bits. El formato de la imagen debe ser uno de PNG (un estándar W3C), GIF o ICO. – Cómo agregar un Favicon a su sitio – QA @ W3C

El formato de favicon debe ser cuadrado, de lo contrario, el navegador lo ampliará. Desafortunadamente, Internet Explorer <11 no admite tipos de archivo .gif o .png, sino solo el formato .ico de Microsoft. Puede usar alguna aplicación de "generador de favicones" como: http://favicon-generator.org/

Si tienes acceso a Photoshop, mira esto:

http://www.photoshopsupport.com/tutorials/jennifer/favicon.html

Este tutorial enlaza con un complemento que permite a Photoshop guardar archivos ico de forma nativa y luego proporciona información sobre los estándares de favicon.

Cuando comencé a hacer favicons, la regla era un archivo ico 16×16 de 8 bits. Si quieres asegurarte de que el favicon funcione en la mayoría de los navegadores, me quedaré con eso.

Para ayudarme utilizo este generador https://realfavicongenerator.net/ Da mucha opción y ayuda. Entonces no te preocupes por tu favicon.