Generador de iconos PWA

Genera los iconos que necesita una app web instalable —PNG de 192 y 512px más un site.webmanifest— a partir de una sola imagen, íntegramente en tu navegador.

La privacidad es lo primero: cada imagen se procesa localmente en tu navegador. Nada se sube, almacena ni transmite a ningún servidor.

Los iconos que hacen instalable una app

Que una progressive web app se considere instalable depende en parte de sus iconos: los navegadores buscan un manifiesto web que declare al menos un PNG de 192×192 y otro de 512×512 antes de ofrecer un aviso de instalación o colocar un icono decente en la pantalla de inicio. Este generador renderiza ambos a partir de tu imagen de origen y escribe un site.webmanifest que los referencia, junto con el apple-touch-icon que quiere iOS y un favicon.ico para las pestañas normales.

Dale forma para el lanzador

Los lanzadores de Android pueden enmascarar un icono en un círculo o un cuadrado redondeado, así que el arte que llega hasta el borde puede quedar recortado. Añade aquí relleno y un fondo sólido y la parte importante se mantendrá dentro del área segura sea cual sea la máscara aplicada; la vista previa en vivo muestra el resultado a cada tamaño. Todo se renderiza en tu dispositivo con la Canvas API —tu logo nunca se sube— y el conjunto completo se descarga en un zip.

Preguntas frecuentes

¿Se sube mi imagen para crear el favicon?
No. El favicon.ico, los iconos PNG y el manifiesto se generan todos localmente en tu navegador con la API Canvas. Tu imagen nunca sale de tu dispositivo.
¿Qué tamaños y archivos obtengo?
Un favicon.ico multirresolución (16, 32 y 48px), iconos PNG a 16, 32, 48, 180 (apple-touch-icon), 192 y 512px, un site.webmanifest y un fragmento de HTML para pegar en tu <head>.
¿Puedo convertir un PNG o SVG a ICO?
Sí. Suelta un PNG, JPG, SVG o WebP y descarga un favicon.ico real. Los logos SVG se rasterizan primero localmente a alta resolución.
¿Qué imagen funciona mejor?
Una imagen cuadrada con un logo sencillo y de alto contraste. Las imágenes no cuadradas se recortan desde el centro para encajar; usa los controles de relleno y forma para encuadrarla como quieras.
¿Cómo instalo el favicon?
Descomprime el paquete en la carpeta raíz de tu sitio y pega el fragmento de HTML proporcionado en el <head> de tus páginas. La mayoría de los navegadores detectan el favicon.ico automáticamente.