¿Qué es un favicon?

No solo aquellos que programan sitios web o desarrollan complementos para navegadores web ciertamente han oído hablar de la palabra favicon Escuchó. Es posible que te hayas topado con el término icono favorito como sinónimo. Pero, ¿qué hay detrás? ¿Qué tiene que ver todo esto con los sitios web? ¿Y cómo surgió el nombre de los gráficos pequeños? He resumido las respuestas a estas y otras preguntas en esta guía. 

¿Qué es un favicon? ¿Cómo surgió el ícono del sitio web para los favoritos web y las pestañas del navegador? ¿Qué significa el nombre y qué formato de archivo se utiliza para el icono del sitio web? ¡Puedes encontrar respuestas a estas y otras preguntas aquí!
¿Qué es un favicon? ¿Cómo surgió el ícono del sitio web para los favoritos web y las pestañas del navegador? ¿Qué significa el nombre y qué formato de archivo se utiliza para el icono del sitio web? ¡Puedes encontrar respuestas a estas y otras preguntas aquí!

¿Conoces un favicon ahora?

Un favicon es un archivo gráfico que (generalmente) mide 16 x 16 o 32 x 32 píxeles. Los favicons se utilizan como logotipo, símbolo o, más bien, icono de los sitios web. Se introdujeron por primera vez en 1999 con Internet Explorer 5 de Microsoft. Se han definido estándares apropiados para asegurar la integración y presentación de los gráficos.

La interfaz gráfica de usuario del navegador web debería actualizarse y hacerse más atractivo para los usuarios privados. En lugar de simplemente archivar enlaces y nombres de sitios web en la lista de marcadores o favoritos, ahora se utilizan pequeños gráficos para diferenciar las páginas. Esto hizo que la operación fuera más fácil y conveniente.

¿De dónde viene el nombre favicon?

El término "favicon" se compone de las palabras en inglés Favorite (para un sitio web en la lista de favoritos del navegador) e Icon (para el icono del sitio web). Cuando se introdujeron, los gráficos así nombrados sirvieron como orientación visual en la lista de sitios web favoritos o marcados en el navegador web. Los favicons ahora son más conocidos como las pequeñas imágenes que aparecen en las pestañas del navegador para mostrar qué página está abierta dentro de ellas. 

La manzana verde de Sir Apfelot, el botón rojo de reproducción de YouTube, la W de Wikipedia sobre un fondo blanco: todos hemos aprendido a distinguir las pestañas del navegador web no principalmente por sus etiquetas sino por sus íconos. Esto es tan rápido como con las empresas y marcas que usan sus logotipos. Sin embargo, dado que los favicons provienen de una época en la que solo se podía abrir un sitio web por ventana del navegador, se formó el nombre para enumerar las páginas en la lista de favoritos o marcadores, es decir, "icono favorito" o "favicon".

El formato de archivo correcto para un favicon

¿Qué formato de archivo elegir para que el favicon de un sitio web se muestre en la pestaña del navegador web, la lista de favoritos y los marcadores? Bueno, de forma predeterminada, se utiliza un contenedor de gráficos con la extensión de archivo .ICO. Este contenedor de iconos puede contener varias versiones y resoluciones del gráfico: similar a los íconos de aplicaciones con la extensión .icns que puedes encontrar en macOS.

En general, puede usar estos formatos de archivo para los íconos de sitios web:

  • ICO
  • PNG
  • GIF
  • SVG

Como se muestra arriba, los tamaños estándar para un archivo .ICO suelen ser de 16 x 16 píxeles o 32 x 32 píxeles. Me gusta abajo https://www.sir-apfelot.de/favicon.ico mira, el favicon de Sir Apfelot se ofrece en el tamaño más pequeño. Si miras el favicon de Wikipedia a continuación https://de.wikipedia.org/favicon.ico pero luego puede ver que ahora también son posibles tamaños de 48 x 48 píxeles o similares.

Cabe señalar que los archivos .ICO se pueden usar con hasta 16,7 millones de colores para crear una amplia variedad de favicons. Con otros formatos de archivo para favicons (sí, hay más), la selección de colores puede ser limitada. Si usa un gif o png, es decir, un archivo .gif o un archivo .png como favicon, el tamaño (16 x 16 píxeles) y la profundidad de color (256 colores) pueden ser limitados. Otro formato que se puede utilizar es .SVG.

Fuentes: 1, 2


¿Te gustó el artículo y te ayudaron las instrucciones del blog? Entonces sería feliz si usted el blog a través de una membresía constante o en en Patreon apoyaría.

Escribe un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados con * markiert

En el Blog de Sir Apfelot encontrarás consejos, instrucciones y reseñas sobre productos de Apple como el iPhone, iPad, Apple Watch, AirPods, iMac, Mac Pro, Mac Mini y Mac Studio.