Generador de favicon

El icono de la pestaña parece un detalle menor hasta que ves tu web junto a otras veinte en la barra del navegador. Es lo único que identifica tu página cuando el título no cabe, y es lo primero que falta en casi todos los sitios recién hechos.

Un icono no es un tamaño, son seis

La pestaña usa 16 o 32 píxeles. El acceso directo de Windows, 48. La pantalla de inicio de un iPhone, 180. Android pide 192, y la pantalla de bienvenida al abrir la web como aplicación, 512. Son usos distintos con requisitos distintos, y por eso no basta con un archivo.

Esta herramienta genera exactamente esos seis, más el .ico clásico y el site.webmanifest. Ni uno más: durante años los generadores producían cuarenta archivos para cubrir Windows 8, el icono fijado de Safari y una docena de tamaños de Apple que ya no lee nadie. Todo eso es peso muerto que hay que subir y mantener.

El .ico sigue siendo necesario

Podría parecer un formato de otra época, y lo es, pero no ha desaparecido por un motivo concreto: los navegadores piden /favicon.ico a la raíz del sitio aunque no lo declares en el HTML. Si no está, esa petición devuelve un 404 que aparece en tus registros para siempre.

Además es un contenedor: dentro llevan varios tamaños y el sistema elige el que le conviene. El que se genera aquí trae 16, 32 y 48 píxeles, guardados como PNG dentro del contenedor, que es lo que admiten Windows y todos los navegadores desde hace más de quince años.

El error del logotipo negro

Es, con diferencia, el fallo más repetido. Diseñas un logotipo en negro sobre fondo transparente, queda impecable en tu web de fondo blanco, y en la pestaña de un navegador en modo oscuro no se ve absolutamente nada.

Hay dos soluciones y las dos son válidas: darle un fondo de color —la opción de esta página— o rediseñar el icono en un tono que funcione sobre claro y sobre oscuro. Lo que no vale es dejarlo transparente y confiar en que nadie use el modo oscuro, porque más de la mitad lo usa.

A 16 píxeles no cabe tu logotipo

Dieciséis píxeles de lado son 256 puntos en total. Ahí no entra una palabra, ni un lema, ni un dibujo con detalle. Lo que se ve a ese tamaño es una forma y un color, nada más.

Por eso los iconos que funcionan son casi siempre la inicial de la marca, un símbolo simple o una mancha de color reconocible. Si tu logotipo es un texto largo, el icono no debería ser ese logotipo reducido —sería una mancha gris ilegible— sino su primera letra o su símbolo.

La previsualización de la lista enseña cada tamaño tal cual queda. Mira el de 16 antes de darlo por bueno: es el que va a ver la gente todo el rato.

El margen y las esquinas

El margen separa el dibujo del borde. Sin nada de margen, un icono cuadrado llena el espacio y se ve más grande; con un 10 %, respira y se parece más a como lo tratan los sistemas operativos.

Las esquinas redondeadas conviene dejarlas a cero en casi todos los casos: iOS y Android recortan el icono a su manera por su cuenta, y si además llega ya redondeado el resultado es una esquina doble muy fea. Súbelo solo si vas a usar el archivo tal cual en otro sitio.

Qué hacer con el ZIP

Todos los archivos van a la raíz de tu sitio, al mismo nivel que el index.html, y en el <head> se pegan las cuatro líneas que aparecen bajo la lista. El ZIP incluye esas instrucciones en un archivo de texto para no tener que volver aquí.

Un aviso práctico: los navegadores guardan el icono en caché con mucha insistencia. Si cambias el tuyo y no lo ves actualizado, no es que haya fallado: prueba en una ventana privada o fuerza la recarga.

Se dibuja en tu navegador

El logotipo de una marca sin lanzar no es algo que apetezca subir a un servidor ajeno. Aquí cada tamaño se dibuja con el canvas de tu propio navegador y el contenedor .ico se escribe byte a byte en tu dispositivo. Si necesitas además ajustar la imagen de partida, recortar imagen la deja cuadrada antes de traerla aquí.