Generador de favicon
Averiguar qué tamaños/formatos/nombres de archivo utilizar para los favicons es confuso, especialmente si intentas dar soporte a los navegadores antiguos. Hay algunas listas muy buenas, pero a menudo están desactualizadas o incompletas. Así que aquí tienes una nueva:
Coloca favicon.ico en el directorio raíz—incluye una imagen de 16×16 y 32×32. Esto será efectivo para la mayoría de los navegadores. No añada un enlace a la cabeza—los navegadores que pueden usar iconos png pueden ignorarlos en favor del ico de menor calidad si lo hace.
Coloca apple-touch-icon-precomposed.png y apple-touch-icon.png en el directorio raíz para todo lo demás. Incluya ambos para obtener la máxima compatibilidad, ya que iOS 1 y BlackBerry OS6 no admiten iconos precompuestos, y Android 2.1 sólo admite iconos precompuestos.
Generador de favicon 32×32
Es hora de repensar cómo cocinar un conjunto de favicons para los navegadores modernos y detener la locura del generador de iconos. En la actualidad, los desarrolladores de frontend tienen que lidiar con más de 20 archivos PNG estáticos sólo para mostrar un pequeño logotipo de un sitio web en una pestaña del navegador o en una pantalla táctil. Sigue leyendo para ver cómo adoptar un enfoque más inteligente y adoptar un conjunto mínimo de iconos que se adapte a la mayoría de las necesidades modernas.
El tema de los favicons ha resultado ser más exhaustivo de lo que cualquiera podría desear, así que también he resumido todo el artículo en sólo dos fragmentos de código para aquellos que ya han sufrido bastante y que saben exactamente qué hacer. Aun así, ¡recomiendo que te pongas a leer el resto!
El concepto de favicon, que es la abreviatura de “icono favorito”, existe desde principios de la década de 2000. Todos hemos visto esas simpáticas imágenes en la barra de pestañas de nuestro navegador que nos ayudan a diferenciar los sitios web abiertos. Los usuarios esperan que su sitio web tenga un favicon. Es una de esas pequeñas cosas que hacen que los demás te tomen en serio.
Incluso Apple, que siempre ha tenido algún tipo de problema estético con los iconos que no provienen de Cupertino, restando importancia a los favicones en Safari durante años, finalmente se ha rendido y ahora los muestra correctamente en todos sus dispositivos.
Favicon html
Es hora de repensar cómo cocinar un conjunto de favicons para los navegadores modernos y detener la locura del generador de iconos. En la actualidad, los desarrolladores de frontend tienen que lidiar con más de 20 archivos PNG estáticos sólo para mostrar un pequeño logotipo de un sitio web en una pestaña del navegador o en una pantalla táctil. Sigue leyendo para ver cómo adoptar un enfoque más inteligente y adoptar un conjunto mínimo de iconos que se adapte a la mayoría de las necesidades modernas.
El tema de los favicons ha resultado ser más exhaustivo de lo que cualquiera podría desear, así que también he resumido todo el artículo en sólo dos fragmentos de código para aquellos que ya han sufrido bastante y que saben exactamente qué hacer. Aun así, ¡recomiendo que te pongas a leer el resto!
El concepto de favicon, que es la abreviatura de “icono favorito”, existe desde principios de la década de 2000. Todos hemos visto esas simpáticas imágenes en la barra de pestañas de nuestro navegador que nos ayudan a diferenciar los sitios web abiertos. Los usuarios esperan que su sitio web tenga un favicon. Es una de esas pequeñas cosas que hacen que los demás te tomen en serio.
Incluso Apple, que siempre ha tenido algún tipo de problema estético con los iconos que no provienen de Cupertino, restando importancia a los favicones en Safari durante años, finalmente se ha rendido y ahora los muestra correctamente en todos sus dispositivos.
Tamaño del favicon wordpress
Actualización para 2020: Ciñéndonos a la cuestión original de los iconos de 16×16 frente a los de 32×32: la recomendación actual debería ser proporcionar un icono de 32×32, obviando por completo el de 16×16. Todos los navegadores y dispositivos actuales soportan iconos de 32×32. El icono se escalará habitualmente hasta 192×192 dependiendo del entorno (suponiendo que no haya tamaños mayores disponibles o que el sistema no los reconozca). El aumento de escala desde una resolución ultrabaja tiene un efecto notable, por lo que es mejor atenerse a 32×32 como la línea de base más pequeña.
Cuidado: Firefox no soporta el atributo de tamaño y utiliza el último icono PNG que encuentra. Asegúrate de declarar la imagen de 32×32 en último lugar: es suficiente para Firefox, y eso evitará que descargue una imagen grande que no necesita. edit: arreglado en 2016.
El tamaño es exactamente el que utiliza la pantalla de inicio de Android. El tamaño del icono de la pantalla de inicio de Apple es de 60px (3x), así que 180px y se reducirá. Otras plataformas utilizan el icono de acceso directo por defecto, que se reducirá también.
Puedes tener varios tamaños de iconos en el mismo archivo. Yo suelo crear favicons (archivo .ico) de 48, 32 y 16 píxeles. Puedes añadir cualquier tamaño de imagen que quieras. La pregunta es si el iPhone utilizará un archivo ico.