Generador de favicon: sube una imagen o escribe una letra

¿Qué es un generador de favicon?

Un generador de favicon convierte una imagen, o una simple letra, en el conjunto de archivos que un navegador necesita para mostrar el icono de una pestaña, un acceso directo o una app añadida a la pantalla de inicio. Esta herramienta ofrece dos puntos de partida: subes una imagen ya existente, o escribes un carácter — una letra, un número, un emoji — y dejas que la herramienta lo dibuje sobre un fondo con la forma que elijas. Todo el trabajo, desde decodificar la imagen hasta ensamblar el contenedor ICO, ocurre en el navegador sobre un elemento canvas, sin que ningún archivo salga de tu equipo.

La salida no es un solo archivo genérico: es un favicon.ico real que empaqueta las versiones de 16, 32 y 48 píxeles dentro del mismo contenedor, más un juego de PNG sueltos a 16, 32, 180, 192 y 512 píxeles — el de 180 ya viene nombrado apple-touch-icon.png. También se genera el JSON del site.webmanifest con el nombre del sitio que escribas, y el fragmento HTML con las etiquetas link. La vista previa muestra el resultado a los cuatro tamaños más relevantes, porque un dibujo que se ve bien como logotipo grande no siempre sobrevive al tamaño real de una pestaña.

Cómo se usa

1. Elige cómo empezar sube una imagen desde tu equipo, o cambia al modo de texto y escribe una letra, un número o un emoji. En el modo de texto eliges además el color de fondo, el color del texto y si la forma final es cuadrada, redondeada o un círculo completo.
2. Revisa la vista previa y escribe el nombre del sitio la vista previa en vivo muestra el icono a 16, 32, 48 y 180 píxeles, para que compruebes qué detalle sobrevive de verdad al tamaño de una pestaña antes de descargar nada. El campo con el nombre del sitio alimenta directamente el site.webmanifest.
3. Descarga los archivos y coloca cada uno donde toca descarga el favicon.ico y ponlo en la raíz de tu sitio — los navegadores lo piden ahí por convención, aunque no exista ninguna etiqueta que lo declare. Descarga también los PNG sueltos y copia el fragmento HTML y el JSON del manifest.

Qué hay dentro de un archivo .ico

Un archivo ICO no es en realidad un formato de imagen: es un pequeño contenedor. Empieza con seis bytes de cabecera, sigue con una entrada de directorio de dieciséis bytes por cada icono que incluye, y termina con las imágenes en sí, una detrás de otra. Esa estructura es la razón por la que un favicon puede llevar varios tamaños a la vez dentro de un único archivo: el navegador lee el directorio, elige la entrada que necesita, y puede mostrar un dibujo distinto — no el mismo dibujo aplastado — para el icono de 16 píxeles de la pestaña y el de 48 de un acceso directo.

Cada entrada del directorio guarda el ancho y el alto en un solo byte, lo que limita el valor a 255 — así que el tamaño 256 se escribe como cero. No es una rareza de manual: aparece en archivos reales, incluido el favicon.ico que sirve este mismo sitio, que se leyó directamente para escribir esta página. Ese archivo contiene cuatro entradas — 16, 32, 48 y 256 píxeles — y mezcla, dentro del mismo contenedor, cargas en formato bitmap y cargas en formato PNG.

Desde Windows Vista, la carga de una entrada puede ser un PNG completo en vez de un bitmap en crudo, y eso es lo que hace posible escribir un ICO entero desde el navegador: un canvas ya exporta PNG, así que la herramienta solo tiene que indexarlos en el directorio con el tamaño correcto. El tamaño que declara la entrada y las dimensiones reales de la carga son dos campos separados, y el formato no obliga a que coincidan; esta herramienta dibuja cada carga exactamente en el tamaño que anuncia su entrada.

La salida se comprobó con dos lectores independientes que vienen instalados en macOS: file(1) la identifica como un MS Windows icon resource con el número de iconos y los tamaños correctos, y sips reconoce el formato sin quejarse. En total se hicieron 41 comprobaciones, entre ellas que cada PNG incrustado vuelve idéntico byte a byte después de escribirse y leerse de nuevo, que las entradas quedan ordenadas de menor a mayor, y que una entrada de 256 píxeles sobrevive entera al truco del byte cero.

Limitaciones honestas

Un icono de 16 por 16 píxeles son 256 píxeles en total, y el detalle no sobrevive a eso. Un logotipo con texto pequeño, degradados finos o varios elementos se convierte en una mancha borrosa a ese tamaño; el consejo honesto no es probar otra imagen sino simplificar la marca antes de convertirla en icono. Por eso la vista previa muestra el tamaño real de 16 píxeles junto a los demás, en vez de enseñar solo una versión ampliada que disimula el problema.

Esta herramienta escribe entradas ICO con cargas en formato PNG, el estándar desde Windows Vista; un software lo bastante antiguo como para ser anterior a eso puede esperar bitmaps en crudo y no reconocer el archivo. Además, la herramienta reduce la imagen que le des, pero no puede saber cómo debería verse tu logotipo a tamaño de pestaña — redimensionar no es diseñar.

La transparencia se conserva en los archivos que genera esta herramienta, pero lo que haga después cada plataforma con ella — redondear las esquinas, componerla sobre un fondo de color — es decisión de esa plataforma y queda fuera del archivo. Por último, volver a codificar la imagen a través de un canvas elimina cualquier metadato que trajera el archivo original, el mismo intercambio que hace el conversor de imágenes.

¿Por qué es gratis?

Esta herramienta es gratis porque el trabajo lo hace el navegador del propio lector, no un servidor. Decodificar la imagen, dibujar el texto sobre el canvas y ensamblar el contenedor ICO byte a byte son operaciones que caben sobradamente en el JavaScript de una pestaña; no hay ninguna razón técnica para cobrar por ellas ni para pedir una cuenta. No se sube ninguna imagen, no se guarda ningún archivo en un servidor y no hay marca de agua que retirar pagando: lo que ves en la vista previa es exactamente lo que se descarga.

Esto no es un caso aislado: todas las herramientas de FreeToGenerate.com siguen la misma regla, procesar en el navegador lo que se pueda procesar en el navegador, en vez de montar una cuenta y un backend para justificar un plan de pago.