Generar un conjunto de favicons _

Cómo funciona la generación de favicons en el navegador

Todo el proceso de generación se ejecuta dentro de tu pestaña del navegador usando la Canvas API y la biblioteca de compresión fflate. Sin procesamiento en servidor, sin subidas, sin servicios de terceros.

1. Carga tu imagen de origen o renderiza tu texto o emoji en un lienzo fuera de pantalla a alta resolución. Si elegiste una imagen, el navegador la decodifica nativamente. Si elegiste el modo texto, la página dibuja tu palabra en un lienzo con la fuente, el color de primer plano y el color de fondo seleccionados.
2. Para cada tamaño objetivo (16, 32, 48, 180, 192, 512 píxeles), la página crea un nuevo lienzo fuera de pantalla en esa dimensión exacta y luego dibuja el contenido de origen usando la Canvas API. El redimensionamiento integrado del navegador maneja la reducción de escala con filtrado bilineal o bicúbico automáticamente, produciendo un favicon nítido en cada tamaño.
3. Cada lienzo se exporta a un Blob PNG mediante canvas.toBlob(). El panel de vista previa te muestra los seis tamaños para que puedas inspeccionar el resultado antes de descargar. Un bloque HTML listo para pegar y un fragmento de manifest de aplicación web (manifest.json) se generan a partir de los nombres de archivo para que puedas colocarlos directamente en la etiqueta head de tu sitio.
4. Al hacer clic en Descargar ZIP, la página lee cada Blob PNG en la memoria, usa fflate para empaquetarlos junto con un archivo manifest.json en un solo archivo ZIP y activa una descarga con un clic. Todo el paquete se crea en tu navegador — no se sube nada en ninguna etapa.

¿Por qué generar favicons en tu navegador?

• Un conjunto completo de favicons elimina el error 404 de favicon no encontrado en la primera visita y garantiza que tu sitio se vea profesional en marcadores, pestañas del navegador y pantallas de instalación PWA. Los tamaños faltantes significan que el navegador no carga nada o recurre a una escala difusa del vecino más cercano.
• El HTML incluido y el fragmento de manifest te evitan escribir seis etiquetas y un bloque JSON de manifest a mano. Pégalos en el head de tu sitio, ajusta las rutas si es necesario y estarás listo en segundos en lugar de minutos.
• La generación del lado del cliente es la única opción en dispositivos corporativos bloqueados que carecen de un editor de fotos. Como no se sube nada, no hay riesgo de fuga de datos ni necesidad de revisión de cumplimiento para imágenes sensibles o con marca.
• El modo de texto y emoji te permite generar un favicon sin ninguna imagen. Escribe la inicial de tu marca, una letra o un emoji, elige una fuente y un color, y obtén un conjunto completo, perfecto para proyectos personales, prototipos o sitios que solo necesitan un favicon temporal ahora.

Aplicaciones comunes de generación de favicons

Todo sitio que la gente marque o instale necesita un favicon. Aquí hay tres escenarios donde un generador basado en navegador ahorra tiempo.

• Configurar una nueva página de aterrizaje o micrositio. Genera un conjunto completo de favicons a partir de un logotipo de marca en menos de un minuto, copia las etiquetas en el head del sitio y despliega. No se requiere herramienta de diseño.
• Producir iconos PWA para una aplicación web progresiva. Los iconos PNG de 192×192 y 512×512 son necesarios para el manifest.json. Genéralos junto con el resto del conjunto de favicons en un solo paso en lugar de redimensionar un logotipo manualmente.
• Crear marcadores de posición para prototipos y sitios de prueba. Escribe una sola letra o emoji, elige un color de fondo y obtén favicons realistas sin esperar los activos finales de la marca del equipo de diseño.

Un ejemplo práctico: generar un conjunto de favicons a partir de un logotipo empresarial

Tienes un logotipo PNG de 500×500 y necesitas el conjunto completo de favicons para un nuevo sitio de marketing.

Abre esta página y coloca el logotipo PNG en la zona de carga. La imagen se carga y aparece una vista previa junto con la cuadrícula de tamaños. Haz clic en Generar favicons. La página dibuja el logotipo en seis lienzos fuera de pantalla a 16, 32, 48, 180, 192 y 512 píxeles y te muestra cada resultado. Debajo del panel de vista previa, aparece el bloque HTML listo para pegar con entradas rel="icon" para los tamaños 16/32/48, un enlace apple-touch-icon para el tamaño 180 y un enlace manifest para los iconos PWA. El fragmento de manifest debajo enumera los iconos de 192 y 512. Haz clic en Descargar ZIP — la página empaqueta los seis PNG más el manifest.json en un solo archivo ZIP mediante fflate. Todo el proceso toma dos segundos y no consume ancho de banda más allá de la carga inicial de la página.

¿Qué tamaños de favicon genera la herramienta?

Seis tamaños: 16×16, 32×32 y 48×48 para favicons estándar del navegador, 180×180 para el Apple Touch Icon, y 192×192 y 512×512 para iconos de manifest PWA. Cada tamaño se emite como PNG. Los navegadores modernos aceptan favicons PNG mediante .

¿Puedo generar un favicon a partir de texto o un emoji?

Sí. Cambia al modo texto o emoji, escribe una palabra o pega un emoji, elige una fuente, color de primer plano y color de fondo, y haz clic en Generar. El texto se renderiza en un lienzo fuera de pantalla a alta resolución y luego se redimensiona a cada tamaño de favicon objetivo.

¿La imagen se sube a un servidor?

No. La imagen nunca sale de tu dispositivo. La página usa la File API del navegador para leer la imagen en la memoria y la Canvas API para redimensionar y exportar cada favicon. Abre el panel Network de DevTools mientras generas — las únicas solicitudes salientes son la carga inicial de la página y las llamadas de anuncios. No se transmiten datos de imagen.

¿Qué formatos se aceptan para la subida de imágenes?

Cualquier formato que el navegador pueda decodificar: PNG, JPEG, WebP, GIF y SVG (rasterizado por el navegador). El límite de tamaño de archivo es de 10 MB por subida.

¿Cómo funciona la descarga ZIP?

La página usa la biblioteca fflate (cargada bajo demanda desde una ruta compartida) para empaquetar todos los PNG generados más el manifest.json en un archivo ZIP estándar. El empaquetado ocurre completamente en la memoria del navegador — sin subida, sin ida y vuelta al servidor. El ZIP se sirve como descarga Blob con un solo clic.

¿Puedo usar estos favicons en cualquier sitio web?

Sí. Los favicons PNG generados funcionan en todos los navegadores modernos que admiten la etiqueta . El Apple Touch Icon de 180×180 cubre iOS y Safari. Los iconos PWA de 192×192 y 512×512 cumplen con los requisitos de manifest para Chrome en Android y otros navegadores compatibles con PWA.

¿Existe una opción de formato .ico verdadero?

La versión actual genera PNG porque todos los navegadores modernos los aceptan mediante . Un formato .ico multirresolución real aún no es compatible y podría añadirse en una versión futura.