Cómo crear un favicon a partir de cualquier imagen (gratis, en tu navegador)

Esa pequeña imagen que aparece junto al título de una página en la pestaña de tu navegador tiene un nombre: el favicon. También se muestra en los marcadores, en el historial y en la pantalla de inicio cuando alguien guarda tu sitio. Un sitio sin favicon parece inacabado, marcado por un icono genérico de documento en blanco en lugar de tu propia marca. La buena noticia es que crear uno lleva un minuto, y puedes hacerlo por completo en tu navegador. Esta guía explica qué es un favicon, qué hace que sea bueno y cómo convertir cualquier imagen en un favicon adecuado con el Generador de Favicon gratuito.

Qué es realmente un favicon

Un favicon es el pequeño icono que un navegador muestra para representar tu sitio. Lo ves en la pestaña, en la barra de marcadores, en el historial de búsqueda y en la lista de accesos directos guardados en un teléfono. Es una de las piezas más pequeñas de un sitio web y, sin embargo, hace un trabajo de verdad: ayuda a la gente a distinguir tu pestaña entre una fila de veinte y hace que un marcador sea reconocible al instante.

Técnicamente, un favicon es solo una pequeña imagen cuadrada que el navegador carga junto con la página. Los tamaños son diminutos, a menudo de 16 por 16 o 32 por 32 píxeles para la pestaña, con versiones más grandes para los marcadores y los accesos directos de la pantalla de inicio. Como se muestra tan pequeño, las reglas para diseñarlo son distintas de las de diseñar un logotipo completo.

Qué hace que un favicon sea bueno

El mayor error es usar un logotipo detallado que queda genial en una tarjeta de visita y se convierte en un borrón a 16 píxeles. Un favicon tiene que leerse de un vistazo, a un tamaño más pequeño que una uña. Ten presentes estos principios:

• Mantenlo simple. Una forma, una letra o un símbolo contundente. Las líneas finas y el texto pequeño desaparecen al tamaño de un favicon.
• Hazlo reconocible. Debe conectar con tu marca, a menudo una sola inicial o el elemento central de tu logotipo.
• Empieza cuadrado. Los favicons son cuadrados, así que una imagen de origen cuadrada evita recortes y estiramientos incómodos.
• Usa un contraste fuerte. Tiene que destacar tanto en los temas claros como en los oscuros del navegador.

Si tu marca es un logotipo de texto, extrae solo la primera letra o la parte del icono. Intentar meter un nombre entero en 16 píxeles nunca funciona.

Prepara primero tu imagen de origen

Un favicon limpio empieza con un origen limpio. Si tu imagen es rectangular o el motivo está desplazado hacia un lado, recórtala primero a un cuadrado ajustado con el Recortador de Imágenes para que la parte importante quede centrada. Si el archivo es enorme, un paso rápido por el Redimensionador de Imágenes lo reduce a un tamaño razonable antes de la conversión. Y si tu imagen está en un formato que el generador no acepta, el Conversor de Formatos de Imagen la cambiará a un PNG estándar en segundos.

Dedicar un momento al origen vale la pena. Una imagen centrada, cuadrada y de alto contraste se convierte en un favicon nítido, mientras que una desequilibrada o borrosa seguirá siendo desequilibrada y borrosa hagas lo que hagas después.

Cómo crear el favicon

Una vez que tu origen luce bien, el Generador de Favicon hace el resto. Funciona por completo en tu navegador, así que la imagen que elijas nunca sale de tu dispositivo y nunca se sube a un servidor.

1. Abre la herramienta y selecciona la imagen cuadrada que preparaste.
2. Deja que genere el favicon a partir de tu imagen.
3. Descarga el resultado y añádelo a tu sitio.

Ese es todo el trabajo. No hay ninguna cuenta que crear ni marca de agua en el resultado.

Cómo ponerlo en tu sitio

Después de descargarlo, coloca el archivo del favicon en la carpeta raíz o de recursos de tu sitio y haz referencia a él en el encabezado de la página. La mayoría de los creadores de sitios y frameworks tienen un lugar específico para un favicon, así que quizá solo necesites soltar el archivo y apuntar un ajuste hacia él. Una vez que esté en vivo, una recarga forzada muestra el nuevo icono en tu pestaña. Los navegadores almacenan los favicons en caché de forma agresiva, así que si no ves el cambio de inmediato, borra la caché o abre la página en una ventana privada.

La versión corta

Un favicon es el pequeño icono cuadrado que representa tu sitio en las pestañas y los marcadores, y todo sitio se beneficia de tener uno. Diseña para tamaños diminutos: simple, reconocible, cuadrado y de alto contraste. Limpia primero tu origen con un recorte o un redimensionamiento, y luego conviértelo en un icono terminado con el Generador de Favicon gratuito, todo en tu navegador y todo privado.