¿Qué es y cómo crear un favicon para añadirlo a tu página web?

Cómo hacer un favicon

A la hora de navegar por internet, seguro que tienes en mente las distintas imágenes que figuran en la parte superior de las páginas web que se muestran en los diferentes motores de búsqueda. Existe la creencia popular de que salen automáticamente por defecto, pero nada más lejos de la realidad.

Es necesario crear un favicon para tu sitio web, si no sabes cómo ¡No te preocupes! En este post te guiaremos por todo el proceso para generar un favicon para tu website.

¿Qué es un favicon?

El favicon es el pequeño icono que se muestra en la parte superior del navegador cuando una página web está abierta. Cuando se guarda un sitio web en ‘Favoritos’ o en ‘Marcadores’ también se pueden visualizar.

Este curioso nombre proviene de la unión de los términos ‘favorito’ e ‘icono’, que viene a englobar la idea de elegir el icono favorito que quiere ser mostrado a los usuarios.

A pesar de que la tónica general es que figure el favicon en la pestaña del navegador, no todas las páginas web lo tienen creado, ya sea porque no se han parado a pensarlo o porque figura el de la plantilla que se muestra por defecto y están conformes.

como crear un favicon

Algunas de las ventajas de contar con este componente gráfico son:

➨ Mejora de usabilidad: cuando se tienen varias pestañas abiertas, los usuarios identifican por el favicon que se muestra aquella a la que quieren acceder. Esta imagen permite que la página web destaque a simple vista.

➨ Mejora identificativa: crear un favicon facilita que un usuario identifique la página rápidamente y, con ello, se refuerza el branding al poder vincular la imagen de la empresa con el icono. Esto depende del tipo de favicon elegido, ya que no siempre se opta por el logotipo de la compañía o emblema del proyecto.

➨ Mejora de imagen: a pesar de ser un detalle mínimo hacer un favicon marca la diferencia. No contar con él otorga un cierto aspecto de dejadez y despreocupación por el proyecto alojado en la página web. Como veremos a continuación, se requiere poco tiempo para generarlo y se consigue que la web luzca de otro modo y genere confiabilidad.

Características de un favicon

✦ Las medidas más comunes de un favicon son 16×16 o 32×32 píxeles.

✦ Se encuentra bajo el formato de archivo .ico.

✦ Lo ideal es que al crear un favicon se opte por una imagen o foto. Debido a su tamaño tan reducido, no es recomendable que lleve texto o una imagen muy completa. Si no tienes alguna que cumpla estos requisitos siempre puedes visitar un banco de imágenes

✦ NO beneficia al SEO. Se dice que al hacer un favicon se mejora el posicionamiento orgánico por captar visitas al destacar con el icono de la página, cuando en realidad, el favicon se muestra una vez que ya se está dentro de la web.

Los distintos modos de crear un favicon

Crear un favicon en WordPress

La mayor parte de las páginas web que se encuentran en la red están desarrolladas con alguna plantilla de WordPress, por lo que esta es la situación más común en la que nos encontramos a la hora de crear un favicon. Hacer un favicon en WordPress es bastante sencillo y está al alcance de cualquier usuario de este CMS, aunque no tenga conocimientos técnicos al respecto.

Lo primero de todo es saber que hay que tener los permisos necesarios para crear un favicon en WordPress, no se puede acceder a estos detalles de configuración si no se tiene un rol que lo permita.

Para crear un favicon en WordPress nos dirigimos a ‘Apariencia’ y después a ‘Personalizar’, en este punto seleccionamos ‘Identidad del sitio’. Dentro de las distintas opciones que se nos abren aparece ’Icono del sitio’ y es aquí donde se va a generar el favicon de la página web.

La imagen que hay que subir al WordPress para crear el favicon debe ser cuadrada y requiere que sus dimensiones cumplan un mínimo de 512×512 pixeles.

Subir favicon a WordPress

Crear un favicon con una herramienta online

En realidad, el modo más sencillo de crear un favicon fuera de WordPress es recurrir a una herramienta para crear iconos online que nos permita generar un favicon de un modo simple a golpe de un par de clics.

Este tipo de páginas-herramientas también reciben el nombre de ‘icon generator’ y muchas de ellas incluso dan la opción de crear también un logotipo online.

El funcionamiento para convertir imagen a icono es de lo más fácil, se sube la fotografía que deseamos que se convierta en favicon -el resultado será mejor si es un formato cuadrado- y nos descargamos el favicon para el sitio web.

La herramienta para crear un favicon online por excelencia es Favicon generator, aunque con una rápida búsqueda en Google podemos encontrar otros más posibles candidatos.

Ya tenemos el archivo de nuestro icono web, que, además, suelen proporcionar ya la imagen bajo la extensión .ico. En este caso, el siguiente paso es instalarlo, como veremos más adelante.

pasar una foto a icono

Crear un favicon con Photoshop

Si nuestro WordPress nos ha dado algún tipo de problema o el CMS en el que queremos crear el favicon es distinto, utilizar Photoshop puede ser otra opción.

Con esta herramienta se pueden conseguir las dimensiones correctas para convertir la imagen a icono y, posteriormente, poder pasar el archivo .jpg a .ico.

Al manipular con PhotoShop el logotipo o imagen que se vaya a usar para crear el favicon, se le dota de las medidas correctas, en este caso 32×32 pixeles. Lo ideal es que se guarde como png para evitar que se muestre el fondo del logotipo, siempre destaca más que teniendo otro tono de fondo.

Una vez que se tiene el tamaño necesario de la imagen, el siguiente paso es convertir el archivo a .ico. Para poder hacerlo desde el propio Photoshop, es necesario descargarse el complemento ICO (Windows Icon Format) que se encuentra en la propia página de su creador.

Una vez instalado en la carpeta de ‘Archivos de Programa’ de Photoshop, se debe reiniciar esta herramienta para que, al volver a entrar en ella, se muestre en el desplegable la opción de poder guardar la imagen bajo el formato .ico.

Por otro lado, si esta opción reviste complejidad, hay páginas que actúan como convertidor de ico y, subiendo la imagen, devuelven perfectamente y en cuestión de segundos, nuestro archivo favicon.ico.

Inserción del favicon en el sitio web

Al crear un favicon en WordPress se inserta automáticamente, pero si no es así, es necesario subirlo para que figure en la barra de direcciones del navegador. Los distintos modos para conseguirlo son:

  • Subir el archivo .ico por FTP
  • Inserir el favicon sirviéndose del cPanel

En cualquiera de los casos, se debe de pegar el archivo favicon.ico en la carpeta de imágenes dentro de los archivos de la plantilla o theme de la página web. En caso de dudas, ya que no siempre se puede identificar bien el lugar correcto, la empresa de hosting podrá indicarle la ruta a seguir.

¿Has visto que sencillo es crear un favicon? ¡Ya no tienes excusas para no tener tu icono web!

Dejar un comentario

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

Al utilizar este formulario aceptas nuestra Políticas de Privacidad *

Responsable de tus datos: Xabier Prada
Finalidad: envío de mis publicaciones, respuestas, así como correos comerciales.
Legitimación: es gracias a tu consentimiento
Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting Raiola Networks.
Tus Derechos: Acceso, Rectificación, Limitación o Suprimir tus datos en [email protected]