¿Qué es un Favicon y cómo crear uno e insertarlo en tu web?

El favicon es uno de esos elementos del diseño web que no tiene gran importancia, pero que cuando se utiliza bien, aporta un valor diferenciador. Incluso es posible que tú mismo hayas decidido confiar en una web porque viste ese pequeño icono que te garantizaba que estabas en el lugar correcto.

¿En verdad puede tener ese efecto? ¿Es necesario para todo tipo de web? De ser así, ¿cómo puedes crear el de tu web? Quédate, porque voy a responderte todas estas preguntas a continuación.

¿Qué es un favicon?

El favicon es una pequeña imagen (a modo de icono) que aparece junto a los resultados de búsqueda y al lado del nombre de un sitio en la pestaña de los navegadores web.

Casi siempre se trata de miniaturas del logo de la web, y si es una empresa, el logo de su marca. Dependiendo del navegador, el favicon puede aparecer en la barra de direcciones, la lista de marcadores, en el listado de favoritos y en la parte superior de las pestañas.

Estos iconos miden por lo general, 16 x 16 píxeles y usan el formato especial para iconos «.ico», pero también se les puede crear en .png y .gif estáticos. Dependerá del navegador.

Aunque casi todas las marcas usan un mismo icono en miniatura para todas sus URLs, algunas cuentan con varios para cada uno de sus productos o servicios.

El ejemplo más claro es el propio Google quien, además de la G, utiliza otros para Gmail, Drive, Sheets, etc. Lo mismo pasa con marcas que varían su logo de acuerdo con la región de donde proviene la audiencia.

La palabra favicon es la unión de las palabras en inglés «favorites» y «icon», que se empezaron a usar gracias al navegador Internet Explorer 5, en el que se propuso utilizar un icono para identificar las webs en la barra de favoritos. Como a todos los usuarios les gustó, los demás navegadores adoptaron la funcionalidad.

¿Por qué es importante que tengas un favicon en tu web?

Si ya tienes toda la identidad visual de tu empresa creada, ¿por qué molestarse por agregar el icono también? Hay varias razones o beneficios. Veamos cuáles son.

1. Aporta diferenciación visual a la marca

Cuando el usuario mira tu favicon en la página de resultados o las diferentes secciones de su navegador personal, distingue más fácilmente tu web del resto. Esto le permite encontrarte con facilidad. Este pequeño beneficio le da satisfacción, lo cual afianza la fidelidad.

2. Genera confianza

Como casi todas las webs tienen un icono personalizado, los usuarios se han acostumbrado a verlos. Por eso, si tu web no tiene uno o utiliza el genérico del CMS, podría dudar de la calidad del contenido que le ofreces. Esto es especialmente importante para las empresas B2B, puesto que así se transmite una imagen más corporativa.

3. Atrae público

Este beneficio deviene del anterior, ya que la confianza motiva al usuario a hacer clic sobre tus URLs, sobre todo en las SERPs, porque si los usuarios ya conocen tu logo en miniatura, sabrán que tu web es confiable y podrían preferirla antes que a la competencia, incluso si estás más abajo en los resultados.

4. Ayuda a memorizar la marca

Como el favicon es una imagen, es más probable que los usuarios nuevos la recuerden más que el propio nombre de tu web. Esto es importante porque cuando te busque Incluso en el historial de su navegador verá esa imagen miniatura y accederá de nuevo a tu web.

5. Mejora la experiencia de usuario

Cuando tenemos abiertas demasiadas pestañas estos pequeños iconos son nuestra salvación como usuarios. Nos permiten navegar entre las diferentes solapas de forma ágil, cosa imposible si no existieran estas pequeñas guías en la navegación.

5 Consejos que debes tener en cuenta al crear tu favicon

Aunque el favicon es un pequeño elemento gráfico, para conseguir los resultados que antes mencionamos, tienes que crearlo siguiendo algunas recomendaciones básicas que te daremos a continuación.

1. Hazlo fácil de reconocer

Ten en cuenta que el tamaño minúsculo del favicon no favorece la inclusión de mucho texto y dibujos, así que tendrás que escoger los elementos que permiten reconocer mejor a tu empresa. Por ejemplo, si tu logo se constituye de texto podrías utilizar solamente la inicial.

2. No olvides la simplicidad

Tanto si vas a usar una letra o una imagen, no debes complicar el diseño utilizando fuentes extrañas o dibujos muy detallados. Más bien, utiliza textos y elementos artísticos simples que se vean bien en miniatura. Por supuesto, lo recomendable es que hagas comparativas de las diferentes opciones.

3. Armonízalo con tu identidad visual

Si tienes que crear un favicon desde cero, no olvides incluir todos los elementos principales de tu identidad visual, como el tipo de fuente y los colores de tu marca. De lo contrario, podrías generar dudas en la audiencia en lugar de confianza y credibilidad. Pero si es posible, utiliza el logo miniaturizado para un mayor reconocimiento del público.

4. Cuida el contraste

En la mayoría de los casos, lo mejor es utilizar un icono con fondo transparente, ya que así se genera poco contraste con el fondo del navegador. Pero si decides utilizar un fondo de color, cuida que los contrastes no sean demasiado marcados en un sentido negativo.

Incluso podría pasar que no haya contraste, por ejemplo, si el fondo de tu favicon es negro quizás no se visualice completamente cuando el usuario active el modo oscuro.

5. Ten en cuenta el CMS

Si bien puedes colocar favicons en cualquier gestor de contenidos, el método puede variar entre softwares. Por lo tanto, al crear el icono en miniatura y determinar sus características, como el tamaño y formato de la imagen, también ten en cuenta las especificaciones que permite el CMS. Así no tendrás que hacer ningún procedimiento extra que no hayas considerado.

¿Cuál es el formato y el tamaño correcto para un favicon?

Para que el favicon tenga la utilidad deseada tiene que atender a dos aspectos clave: el formato y el tamaño. Veamos qué debes considerar en cada uno.

Formato

El formato del icono es un aspecto importante porque determina la compatibilidad con los diferentes navegadores web, ya que estos solo aceptan ciertos formatos de imagen para los iconos miniatura.

El estándar es el formato .ico, que es el utilizado por Windows para sus distintos iconos, lo cual lo ha hecho muy popular y aceptado en los distintos softwares.

Además del formato ico, se puede usar PNG, GIF, JPG y SVG. El PNG ofrece la ventaja de tener menor pérdida de calidad de la imagen, el problema es que suele ser más pesado. El SVG tiene más limitaciones en cuanto a compatibilidad, pero es mejor si tu logo se basa en vectores.

Pero usar .ico tiene la ventaja especial de que puedes almacenar varias fotos en un mismo archivo ico. Con esto, el navegador podrá utilizar la versión más adecuada para cada entorno en el que necesite mostrar el favicon.

Tamaño

El tamaño del icono es importante porque facilita su visualización en los diferentes tamaños de dispositivo.

El estándar es de 16 x 16 píxeles, puesto que la mayoría de los dispositivos son smartphones y este tamaño es ideal para casi cualquier pantalla; pero también se puede usar 32 x 32 para dispositivos con tamaños excepcionales.

Para pantallas más grandes es bueno contar con favicons de 48 x 48 y 64 x 64 píxeles. Por ejemplo, en las tablets, smart TV y monitores amplios es posible que los iconos en miniatura se vean pixelados porque la pantalla los estire, así que es bueno contar con varias  opciones.

¿Cómo crear un Favicon?

Ahora que ya sabes la importancia del tamaño y el formato del icono miniatura para tu web, veamos qué opciones tienes para crear favicon, es decir, qué herramientas de diseños pueden servirte.

Programas de diseño

El programa de diseño gráfico por excelencia es Photoshop, y es que sus configuraciones permiten hacer múltiples ajustes y personalizaciones al diseño del icono.

Sin embargo existen otras alternativas, como Gimp, Paint, Pixa, SAI, Pixlr o, como no, Canva. Todo dependerá del nivel de personalización que quieras lograr y de lo experto seas usando un programa puntual.

Sin embargo, si no tienes mucha experiencia en creación de favicons, no te preocupes, ya que la mayoría de las herramientas te permite realizarlo con relativa facilidad.

En casi todas el proceso es el mismo. A continuación, te diremos cómo hacerlo con Photoshop:

1. Abre la herramienta y presiona en Crear nuevo.
2. Elige la opción Favicon.
3. Asigna las especificaciones del icono: ancho y alto, resolución (elige 72 pixel/pulgada), modo de color (Selecciona RGB a 16 bits). Después, presiona Crear.
4. Carga el archivo que vas a convertir en icono. (Seguramente el archivo tendrá mayores dimensiones, ajústalas manualmente a las que hayas estipulado en el paso 3).
5. Por último, presiona en Archivo > Exportar > Exportación rápida como .png.

Así se descargará tu favicon en tu dispositivo.

Herramientas online

Existen otras herramientas online especializadas en crear favicons, y no tienes que instalar ningún programa. Algunas de las alternativas son:

Favicon.io

Favicon.i o es 100% gratuita y su funcionamiento es muy simple.

Tiene tres formas de crear favicons: subiendo tu archivo, creando uno desde cero con sólo texto o usando un emoji.

En todos los casos, al terminar de editar tu icono, presionas en Descargar y vas a tener un archivo .zip con distintas versiones del icono en miniatura.

Genfavicon

Genfavicon es una herramienta online muy fácil de usar. Puedes crear iconos en miniatura a partir de una imagen que ya tengas, es decir, que no vas a poder crearla allí mismo. Carga la imagen usando una url o importandola desde tu dispositivo. Luego, tienes que ajustar el tamaño, que puede ser de 16, 32, 48, 64 y 128 píxeles.

Por último, previsualiza si el resultado es lo que quieres, y si es así, presiona en Descargar. Tienes la opción de pedir el formato .ico o .png.

Favicon Generator

Favicon Generator te permite crear tus iconos miniatura en pocos segundos: solo tienes que subir el archivo desde tu dispositivo y presionar en Crear favicon. Luego, haz clic en Descarga el icono generado para obtener el archivo comprimido con más de 25 archivos en .png y .ico.

También obtendrás el código HTML para incluir en tu web, solo tienes que copiarlo y pegarlo.

Favicon.cc

Favicon.cc ofrece algunas configuraciones más para la edición. Sin embargo, puedes crear favicons con la misma facilidad que con las otras plataformas.

Aquí tienes la posibilidad de ver otros diseños para inspirarte y para que tengas una idea de cómo se verá tu icono cuando lo crees en esta herramienta.

¿Cómo insertar o añadir un Favicon en tu sitio web?

Una vez que has creado tu favicon con alguna herramienta, el siguiente paso es añadirlo a tu web. Aquí tienes dos formas de hacerlo.

HTML

No importa si no eres un experto programador o no sabes mucho de código, puedes añadir tu favicon en HTML de forma simple siguiendo estos sencillos pasos:

1. Ubica el archivo con el header de tu web y ábrelo.
2. Localiza el tag <head> y coloca el siguiente código

<link rel=»icon» href=»ruta-del-archivo.png» sizes=»tamaño-en-pixeles-de-tu-favicon» />

Este tiene que estar entre el tag de apertura y el de cierre (</head>).

3. Introduce los datos de tu favicon en los apartados que están entre comillas en el código que te acabamos de dar.

Recuerda que tienes que poner una línea de código por cada formato de Favicon que quieras incluir para los distintos usos.

4. Guarda los cambios.

Si no quieres hacerlo manualmente, procura guardar el código que te proporcionará la herramienta de creación de favicon.

WordPress

Si tienes tu sitio web en WordPress puedes añadir tu favicon sin tocar código desde el escritorio de administración. Para hacerlo sigue estos pasos:

1. Ve al apartado de Apariencia del menú lateral.
2. Entra en Personalizar > Identidad del sitio > Icono del sitio.
3. Presiona en Seleccionar.
4. Sube el archivo a la biblioteca de medios.
5. Elige el archivo que acabas de subir y presiona en Subir.
6. Ajusta el icono para que se vea tal y como deseas.
7. Presiona en Guardar.

Con eso ya habrás configurado el icono miniatura de tu web.

También puedes usar plugins para crear y añadir la imagen a tu WordPress.

Conclusión

El favicon es un elemento visual de tu web que puede potenciar el tráfico y las conversiones, porque sirve para generar confianza y credibilidad, además de facilitar la identificación de tu web en los navegadores.

Estas ventajas hacen que valga la pena dedicar tiempo a crearlo y ajustarlo para que se vea bien.

Toma en consideración los consejos que viste aquí al crear tu icono, así evitarás errores que te hagan perder tiempo. Con cualquiera de las herramientas que te he mostrado podrás crear iconos en miniatura en pocos segundos y con código HTML incluido. ¡Ya no tienes excusas para no tener uno de tu web!

¿Qué herramienta vas a usar para crear tu favicon?

Te leo en los comentarios.