Contenidos
Símbolo del sitio web
Es hora de repensar la forma en que cocinamos 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 diminuto 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 vienen 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.
Paquete de iconos
Los favicons son pequeños archivos de iconos de 16×16 que se muestran junto a la URL de su sitio en la barra de direcciones del navegador. Además, suelen aparecer junto al nombre de su sitio en la lista de pestañas abiertas y marcadores de un usuario, lo que facilita su rápida identificación entre otros sitios.
Los iconos de las aplicaciones son las imágenes que se pulsan en el smartphone para lanzar una aplicación. A medida que se lanzan nuevos teléfonos con pantallas de mayor resolución, se necesitan iconos de aplicaciones de mayor resolución. Los desarrolladores siguen queriendo mantener la compatibilidad con los teléfonos más antiguos con menor resolución, así que cuando se crea un icono de aplicación hay que crear varias variaciones de tamaño de la misma imagen. Esto es cierto para todos los teléfonos inteligentes como el iPhone y Android, e incluso para las tabletas como el iPad.
Aunque muchos navegadores web modernos admiten favicons guardados como GIF, PNG u otros formatos de archivo populares, todas las versiones de Internet Explorer siguen exigiendo que los favicons se guarden como archivos ICO (un formato de icono de Microsoft). Esta herramienta proporciona una forma sencilla de convertir cualquier GIF, PNG o JPEG a ICO, que es compatible con todos los navegadores web modernos. También te permite crear favicons desde cero a través de un práctico editor online. Además, el editor te permite ajustar manualmente los favicons generados para garantizar el mejor resultado posible.
Iconos svg gratuitos
Un favicon (/ˈfæv.ɪˌkɒn/; abreviatura de icono favorito), también conocido como icono de acceso directo, icono de sitio web, icono de pestaña, icono de URL o icono de marcador, es un archivo que contiene uno o más iconos pequeños,[1] asociados a un sitio o página web en particular.[1][2] Un diseñador web puede crear un icono de este tipo y subirlo a un sitio (o página web) por varios medios, y los navegadores web gráficos lo utilizarán. [Los navegadores que admiten favicones suelen mostrarlos en la barra de direcciones del navegador (a veces también en el historial) y junto al nombre de la página en una lista de marcadores[3]. Los navegadores que admiten una interfaz de documentos con pestañas suelen mostrar el favicón de una página junto al título de la misma en la pestaña, y los navegadores específicos de un sitio utilizan el favicón como icono de escritorio[1].
En marzo de 1999, Microsoft lanzó Internet Explorer 5, que soportaba favicons por primera vez[4]. Originalmente, el favicon era un archivo llamado favicon.ico colocado en el directorio raíz de un sitio web. Se utilizaba en los favoritos de Internet Explorer (marcadores) y junto a la URL en la barra de direcciones si la página estaba marcada.[5][6][7][4] Un efecto secundario era que se podía estimar el número de visitantes que habían marcado la página mediante las peticiones del favicon. Este efecto secundario ya no funciona, ya que todos los navegadores modernos cargan el archivo del favicon para mostrarlo en su barra de direcciones web, independientemente de si el sitio está marcado como favorito[6].
Iconos web gratuitos
Un convertidor gratuito. Puedes convertir tu archivo PNG (que también admite otros formatos de imagen) al formato de iconos ICO de Windows. El formato de icono ico se puede utilizar en el software o se muestra como un icono del sitio web (favicon.ico) en el navegador. Este convertidor está escrito en código JS. Así que se ejecuta completamente en el navegador, no es necesario subir archivos de imagen al servidor. No te preocupes por la filtración de los datos de la imagen.
Las imágenes PNG son un formato de imagen popular que incluye un fondo transparente. Se utiliza principalmente en la visualización de páginas web. El formato ICO es un formato de icono para sistemas Windows. Contiene una lista de imágenes con varios tamaños de imágenes, como 16×16 y 32×32. El sistema Windows lee imágenes de diferentes tamaños en función del escenario de uso. Por ejemplo, la barra de título utiliza una imagen de tamaño 16×16, la barra de herramientas utiliza una imagen de tamaño 32×32 y el escritorio utiliza una imagen de tamaño 48×48. Estas imágenes están todas en un archivo y su extensión es ICO. Esta herramienta permite convertir imágenes PNG de cualquier tamaño en iconos de varios tamaños, pero sólo admite iconos convertidos a colores de 32 bits. El formato de color es RGBA. Esta herramienta no admite el color de 16, 24 bits o el formato de mapa de bits con paleta. Si su icono se utiliza en el icono de favoritos (favicon.ico) en el sitio web, sólo tiene que seleccionar el tamaño 16×16. Las imágenes PNG de diferentes tamaños perderán parte de la información de la imagen cuando se conviertan en imágenes de tamaño 16×16. Las imágenes PNG pequeñas pueden distorsionarse cuando se convierten a un formato de icono grande (128×128, 256×256). Por lo tanto, debe elegir una imagen PNG del tamaño adecuado.