Qué es un favicon y cómo diseñar tú mismo uno para que sea (casi) perfecto

Cuando se trata de atraer visitas a tu página web, todos los detalles cuentan, incluido el más pequeño.

Y aunque el favicon por sí solo no va a posicionarte en el TOP 1, que tu web no lo tenga es algo que no deberías permitirte.

¿No sabes de qué hablamos? ¿Cómo se crea un perfecto? ¿Hay páginas que te ayudan a generarlo gratis?

Las respuestas a estas preguntas, las encontrarás en este post.

¡Empezamos!

¿Qué es un favicon?

La palabra «favicon» surge al unir las palabras en inglés favourite + icon (favorito + icono) y su principal función, es identificar de forma gráfica una página web.

Para ser más exactos, es esa pequeña imagen que aparece en:

  • Las pestañas del navegador.
  • La barra de marcadores.
  • El historial de navegación.
  • Las serps de Google.
  • Etc.
que-es-un-favicon

En definitiva, allá donde aparezca cualquier tipo de página web, si usa este tipo de icono, aparecerá a su lado.

Lo que como imaginarás, es una gran ventaja porque ayuda a identificar el sitio con una imagen de apenas 16×16 píxeles.

Consejos básicos para hacer un favicon

A pesar de no ser estrictamente necesario, sí que es muy recomendable que tu web cuente con un «icono favorito».

Para empezar porque como hemos visto, hace que tu sitio sea reconocible a simple vista.

Solo eso es razón suficiente para añadirlo pero es que además, está tan instaurado en las páginas web que su ausencia (o usar uno genérico) puede generar desconfianza en los usuarios.

Pero, ¿cómo es el favicon ideal? Para nosotros, el que cumple estos requisitos:

  • Tamaño: a pesar de no haber una medida estándar, la recomendación es que el tamaño del icono sea de 16×16 píxeles, aunque algunas personas prefieres subir a los 32×32 para que se vea mejor en pantalla de alta resolución.
  • Formato: en sus orígenes, el formato obligatorio era el .ico pero hoy en día, los navegadores soportan iconos creados en png, gif, jpeg y hasta svg.

Esas son las recomendaciones técnicas.

Ahora, si hablamos a nivel de diseño, nuestro primero consejo es que intentes que sea lo más simple posible.

Ten en cuenta que es un recuadro muy pequeño, por lo que no tiene sentido recargarlo (y muchos menos escribir el nombre de tu sitio).

Por supuesto, lo ideal es que uses la paleta de colores de tu web, para que así el usuario lo identifique con tu página con más facilidad.

Y aunque te recomendamos un diseño simple y limpio, conseguir que destaque frente a los de tu competencia es algo que siempre debes intentar.

Los mejores generadores de favicon gratis

Lo explicado en el apartado anterior está muy bien pero, salvo que seas diseñador o manejes herramientas de diseño, crear un icono a mano puede ser algo muy complicado.

Por suerte, al igual que hay programas para diseñar páginas sin código, también hay generadores de favicons para ahorrarte tiempo y esfuerzo.

1. Favicon.io

favicon.io

Sin duda alguna, esta web es una de las más interesantes para crear un «icono favorito» para tu página web.

Y lo es, por todas las opciones que ofrece.

Lo primero que destaca, es que te permite crear el icono usando un emoji, lo que sin duda es una forma rápida y efectiva si no tienes tiempo (ni ganas).

Otro método que ofrece es generar el favicon desde un texto, pudiendo elegir el color y la forma del fondo y el color de las letras.

Para terminar, si tienes un logo y quieres usarlo para esto, ofrece la opción de convertirlo a icono del sitio simplemente arrastrando y soltando.

En resumen, es complicado que entres a este sitio y salgas de él sin tu favicon.

>> Ir a favicon.io.

2. Real Favicon Generator

real-favicon-generator

Aunque a nivel de opciones ofrece menos posibilidades que la anterior, Real Favicon Generator es una opción que seguro te encanta.

Para empezar porque solo tienes que subir una imagen, esperar a que se cargue y voilà! ya tienes un favicon para tu web.

Y antes de descargarlo, podrás hacer pequeñas modificaciones como:

  • Añadir un color de fondo.
  • Modificar el radio del fondo.
  • Cambiar el tamaño de la imagen.

Como alternativa, también te permite crear el archivo a partir de un icono .svg, con lo que las opciones se multiplican casi hasta el infinito.

Y como detalle final, cuenta también con un verificador de favicon en el que, escribiendo un dominio, verás qué puedes hacer para tener uno todavía mejor.

>> Ir a Real Favicon Generator.

3. Favicon Generator

Favicon-Generator

Como alternativa a las páginas anteriores, tienes favicon-generator, una web para generar iconos para tu página, pero también para aplicaciones y programas de escritorio.

Pero centrándonos en lo primero, para crear un icono favorito tienes 2 opciones.

La primera, como en las otras webs, es subir una imagen (en formato png, jpg, o gif) y crear el favicon a partir de ella.

Eso sí, en este generador no podrás modificar nada, así que asegúrate de subir la imagen tal cual quieres el icono.

O si lo prefieres, puedes escoger un favicon prediseñado de su galería.

Lo bueno de este método, es que tienes varias formas para encontrar el que más se adapta a tus necesidades:

  • Palabra clave: funciona como un buscador. Escribe la palabra que quieras y verás los archivos relacionados con ella.
  • Letra: si quieres que el icono sea (o contenga) una letra o símbolo.
  • Colores: si lo importante es que sea de un color concreto, solo tienes que elegirlo.

Así seguro que encuentras el perfecto.

>> Ir a Favicon-generator.

Favicon: un pequeño detalle que aporta mucho

Ahora que sabes lo más importante sobre este archivo, lo último que te queda es ponerte manos a la obra y añadir uno a tu web.

Pero si de verdad quieres aumentar el número de visitas de tu página, te recomendamos estos otros artículos:

Y como regalo por haber llegado hasta el final del post, no olvides que en nuestra página de inicio tienes cupones descuento para las empresas de hosting más populares.

¡Los mejores servidores al mejor precio!

Hostcupon
Logo