¿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.
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.
CÓMO AÑADIR EL FAVICON EN WORDPRESS
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.
CÓMO AÑADIR EL FAVICON EN HTML
En la sección <head> de tu página web agrega las siguientes líneas al código HTML:
Si tiene el formato .ico, añade la siguiente línea:
<link rel="icon" type="image/vnd.microsoft.icon" href="RUTA/NOMBRE_FICHERO.ico">
Si tiene el formato .gif, añade la siguiente línea:
<link rel="icon" type="image/gif" href="RUTA/NOMBRE_FICHERO.gif">
Si tiene el formato .png, añade la siguiente línea:
<link rel="icon" type="image/png" href="RUTA/NOMBRE_FICHERO.png">
Asegúrate de que la ruta y el nombre del fichero estén especificados correctamente.
Si tienes alguna duda sobre cómo crear o añadir un favicon en tu web, el soporte técnico está disponible 24/7 para ayudarte. ????