¿Qué es un Favicon y cómo puedes crear uno para tu sitio?

¿Qué es un favicon?

Probablemente hayas notado que muchos sitios web que visitas tienen un pequeño icono de navegador junto a ellos en la pestaña de tu navegador, así como en tu barra de marcadores.

Este pequeño icono de 16 × 16 se conoce como favicon y se utiliza en muchos lugares de la web al mostrar tu sitio.

Este artículo te mostrará cómo crear tu propia imagen favicon.ico y agregarla a tu sitio web.

¿CUAL ES EL PROPÓSITO DE LOS FAVICONS?

Es posible que los hayas descuidado hasta ahora, pero los favicons son fundamentales para tu diseño web. Para empezar, harán que tu sitio web sea más visible incluso entre las docenas de pestañas abiertas de un navegador.

El problema es que la mayoría de los usuarios que no saben cómo crear un favicon lo perciben como demasiado difícil de completar, pero eso no está cerca de la verdad. Como resultado, mantienen el favicon genérico entregado por su webhost, o dejan el sitio no especificado.

Como se puede adivinar, esta práctica no es buena para la marca.

Curiosamente, los favicons solían ser aún más importantes en el pasado de lo que son hoy en día. Mucho antes de que se introdujera Google Analytics, crear un favicon era fundamental para evaluar el tráfico web y contar marcadores por página. ¡A que no sabías este fragmento de la historia de Internet!

Los favicons de hoy tienen poco que ver con sus predecesores analíticos, pero siguen siendo mejoradores críticos de la experiencia de sus usuarios.

Cada navegador los muestra en su barra de direcciones, pestañas de navegación y barras de enlace. Incluso hay navegadores que los muestran cada vez que se crea un enlace de acceso directo a tu sitio web, tanto en dispositivos móviles como de escritorio.

A menos que te asegures de que tus favicons estén presentes y completamente funcionales, obtendrás un símbolo de navegador genérico, y eso no te hará especial en ningún aspecto.

Como propietario de un sitio web, ya calificas para un favicon, así que trata de recordar la información básica: tu favicon será la pequeña imagen de logotipo cuadrado asociada a tu sitio web, y aparecerá en diferentes situaciones y lugares como pestañas, marcadores, navegador y barras de direcciones.

¿Por qué deberías usar un favicon para tu sitio?

No es obligatorio que utilices un favicon, pero puede ser muy bueno para propósitos de marca y para asegurarte que las personas reconozcan tu sitio entre todas las pestañas abiertas de sus navegadores.

Debes utilizar un Favicon para personalizar tu sitio web y completar la configuración de éste en toda la web.

¿Cómo se crea un favicon?

Ahora viene la parte fácil!

Si bien existen muchas maneras de crear un favicon, la más sencilla de ellas es utilizando un “generador gratuito de favicons” como éste:

1. Selecciona el tamaño del favicon que deseas crear. (16x x 16x)
2. Selecciona la imagen, tu logotipo y súbala en el servidor. Submit!
3. Haz clic derecho en el enlace que te aparecerá y elige ‘Guardar como’.
No era tan complicado, verdad?.

¿Cómo configuras el Favicon en tu sitio web?

El siguiente paso es cargar tu nuevo Favicon en el directorio de tu sitio web a través de un cliente FTP y agregar el siguiente código en tu archivo HTML, en el encabezado.

El código debe colocarse después de la etiqueta <head>:

<link rel = “icono de acceso directo” href = “/ Favicon.ico” />

Dependiendo del sistema de administración de contenidos que utilices, puedes cargar un Favicon a través de tu personalizador de temas o de tu sistema de gestión de contenido, como lo haces en WordPress o Joomla.

¿Por qué no se pudo mostrar mi Favicon.ico?

Debes asegurarte de que tu icono tiene el tamaño y el formato correctos. Debe ser de tamaño cuadrado y necesita tener el formato .ICO no el .GIF, JPG o PNG.

Conclusión

El “favicon.ico” no es esencial para el funcionamiento de un sitio web. De hecho, pocas personas incluso notan su existencia, y es realmente demasiado pequeño para poner algo útil en él. Sin embargo, la creación de uno, agrega profesionalidad a tu sitio, lo destaca y te resalta como un diseñador web que atiende a los detalles.