¿Te has fijado que cuando visitas un sitio web, en la pestaña del navegador aparece un pequeño icono acompañando el título de la página? Ocurre lo mismo en tu lista de sitio favoritos o marcadores.
Te presentamos el favicon. Sigue leyendo si quieres aprender a crear el tuyo propio.
Contenido
Qué es el Favicon
El favicon es un icono que identifica a un sitio web y suele mostrarse en los navegadores acompañando al título de la página. También se encuentra en las listas de marcadores o favoritos que se guardan en los navegadores. De hecho, su nombre proviene del inglés “favorites icon”.
Cuando navegamos hasta un sitio web, el navegador busca en las primeras líneas del código HTML en busca del icono del sitio. Si lo encuentra, éste se mostrará en la barra del navegador, a la izquierda de la pestaña y siempre junto al título del sitio.
Cómo surgió el favicon
El favicon fue implementado por Microsoft en su navegador Internet Explorer en 1999 y se convirtió en estándar en el año 2000. En sus inicios se trataba de un archivo llamado favicon.ico que se colocaba en la raíz de un servidor. Como veremos más adelante, hoy en día se admiten otros formatos de archivo.
La idea original se sigue manteniendo intacta a día de hoy: hacer más fácilmente identificable el sitio al guardarlo en listas o pestañas junto a otros sitios.
Curiosamente, aunque no fue un efecto buscado, al principio se podían contar las veces que una página web se había agregado a los favoritos del navegador contando las veces que éstos descargaban el favicon.
Cómo crear un favicon
Generalmente, para crear los favicon se utiliza la parte más representativa de la imagen corporativa, el logo o la marca del sitio web. Si te fijas en los favicon de los sitios web más conocidos, verás que están pensados para identificar inmediatamente el sitio al que representan. Si ya tienes clara cuál es la imagen que representará a tu sitio, es hora de ponerse manos a la obra.
En primer lugar, vamos a repasar algunas cuestiones técnicas:
Como comentábamos anteriormente, hoy en día se admiten más formatos además del ya mencionado .ico. Prácticamente todos los navegadores soportan *.png y *.gif. Algunos soportan *.jpg y *.svg e incluso *.gif animado. Los tamaños en píxeles más habituales para los favicon son 16×16, 32×32, 48×48 o 64×64. La profundidad de color puede ser 8-bit, 16-bit o 32-bit.
Teniendo en cuenta la cantidad de formatos que se admiten, crear un favicon no es proceso complicado.
Usa un editor de imágenes
Para ello puedes utilizar cualquier programa de edición de imágenes como Photoshop o Gimp. En cualquiera de ellos, crea una imagen del tamaño adecuado y añade tu logo. Debes prestar algo más de atención si quieres exportar tu favicon con fondo transparente, ya que algunos formatos de imagen como el *.jpg no admiten transparencia. En ese caso tu favicon aparecería con un fondo blanco.
Si no tienes a mano uno de estos programas de imagen, también puedes generar tu favicon online. Existen diversas páginas que te permiten subir tu logo, ajustar el tamaño y exportarlo en diversos formatos. Estas páginas web son muy prácticas y fáciles de usar y son una excelente opción para ahorrar tiempo si quieres hacer algo sencillo.
Debes tener en cuenta que la mayoría de ellas solo generan un favicon a partir de imágenes ya editadas en formato cuadrado, aptas para ser convertidas en icono. Con lo cual, es posible que igualmente tengas que pasar por un programa de edición como los anteriormente mencionados.
Cómo añadir el favicon a la web
Una vez que tienes la imagen ya generada y con el tamaño adecuado, el siguiente paso es cargarla en tu sitio web e indicar a los navegadores dónde pueden encontrarla.
Si estás utilizando WordPress, es muy fácil cargar tu favicon. Solo tienes que ir al menú “Apariencia > Personalizar > Identidad del Sitio”. Ahí verás una opción que pone “Subir icono del sitio”. Se trata de una herramienta para cargar imágenes similar a la de la Biblioteca de WordPress. Sube la imagen que quieras que aparezca como icono sel sitio y ¡Ya está!
WordPress se encargará de añadirle las etiquetas necesarias para que los navegadores identifiquen correctamente tu favicon.
En cualquier caso, está bien saber cómo se gestiona realmente la identificación de un favicon de forma, digamos, manual.
Para ello, habría que subir la imagen a través de un servidor FTP. Normalmente se coloca en la raíz del mismo. A continuación, al inicio del código HTML se tiene que insertar una línea que identifique el icono de cara a los navegadores.
La forma más utilizada y recomendada es la siguiente:
<link rel=»shortcut icon» href=»https://example.com/myicon.ico»>
Encuentra favicon gratis
Si todo lo anterior te parece una pérdida de tiempo y quieres encontrar un icono para tu sitio web de una forma rápida y fácil, puedes acudir a los múltiples sitios donde se encuentran colecciones de favicon gratis.
En estos sitios puedes encontrar iconos genéricos como animales, banderas u otro tipo de emoticonos que te pueden ahorrar mucho tiempo si están buscando algo de eso.
Tampoco hace falta que te quedes con lo primero que encuentres. Lo bueno de los favicon s que puedes cambiarlo todas la veces que quieras.
Conclusión
El favicon es uno de esos pequeños aspectos del diseño web a los que a veces no prestamos demasiada atención, pero vale la pena pararse un rato a crear un icono que realmente sea representativo de tu sitio web.
Simplemente recuerda que el favicon debe identificar tu sitio web, tu producto o marca. También ten en cuenta que el espacio donde se visualiza en la pestaña del navegador es muy pequeño, por lo que debe ser un gráfico pequeño y que se vea bien en ese tamaño reducido.
Esto no es nada fácil y no todos los iconos o gráficos funcionan bien al convertirlos en favicon.
Si tienes alguna duda sobre cómo crear o cargar un favicon en tu web, no dudes en enviarnos la consulta o dejarnos un comentario a continuación.
