¿Qué formato de archivo es mejor para PWA?

El formato PNG es el estándar obligatorio. Los PNG transparentes son los mejores para la compatibilidad.

¿Qué es un icono 'Maskable'?

Permite que Android le dé forma a tu icono en varias formas sin cortar tu logo.

¿Qué iconos debo añadir a mi manifest.json?

Al menos de 192x192 y 512x512. Nuestra herramienta te da el bloque de código completo.

¿Por qué mi icono PWA no aparece tras la instalación?

Suele deberse a una ruta incorrecta en el manifest.json. Asegúrate de que las rutas coincidan con la estructura de carpetas de tu proyecto.

Generador de Iconos PWA (Gratis, Rápido y Privado)

Name: Generador de Iconos PWA: Convierte tu Web App en una Obra Maestra
Author: Pixes

Genere los iconos estándar y enmascarables necesarios para su aplicación PWA.

Privacidad ante todo

Los archivos nunca salen de tu navegador
Sin carga a servidores
Todo se procesa localmente en tu dispositivo

¿Qué es un Icono PWA y por qué es necesario un 'Icono Maskable'?

Es el símbolo visual de tu web app cuando se 'instala' en el escritorio o pantalla de inicio. A diferencia de las webs estándar, las PWAs se definen mediante un archivo manifest.json, donde se especifica el 'tamaño de icono PWA' (tipicamente 192x192 y 512x512). Sin embargo, los 'Iconos Maskable' de Android han cambiado las cosas. Estos tienen una 'zona segura' designada alrededor del logo, permitiendo que el sistema lo recorte en diferentes formas sin cortar tu marca. Nuestro generador maneja ambas variantes al instante, asegurando que tu PWA esté tan pulida visualmente como cualquier aplicación nativa de las tiendas oficiales.

¿Por qué elegir el Generador de Iconos PWA de Pixes.app?

Cumplimiento con Google Chrome y W3C: Ajustamos cada nombre de icono y tamaño según los últimos estándares para una puntuación completa de Lighthouse.. Elimina los errores de 'Icono PWA faltante' en tus tests automatizados.

Soporte de Manifest.json Incluido: No solo te damos imágenes; generamos el código JSON para identificarlas.. Copia y pega y sáltate la documentación técnica.

Rápido y Simple: Sin tarifas, sin registro y sin correos. Solo resultados de alta calidad en segundos.. Acelera tu ciclo de desarrollo con nuestra herramienta optimizada.

3 Pasos para un Pack de Iconos PWA Profesional

Sin dolores de cabeza por codificación o archivos de manifiesto. Aprende a completar tu proyecto de iconos PWA desde tu navegador.

Sube tu Icono Maestro (512x512): Elige tu imagen de mayor resolución, preferiblemente 512x512 en formato PNG. Haz clic en 'Seleccionar imagen'.
Generación de Iconos Maskable y Estándar: Una vez subido, nuestra herramienta genera las versiones 192x192 (General), 512x512 (Splash Screen) y 'maskable-icon-512x512' simultáneamente.
Copia el Fragmento de Manifiesto y Descarga: Generamos el array de 'icons' que necesitarás pegar en tu archivo manifest.json. Haz clic en 'Copiar Código' y descarga el set completo en un ZIP.

Consejos Expertos para Iconos PWA

Mejora tu Puntuación Lighthouse: Google Lighthouse espera iconos 192x192 y 512x512, además de al menos uno 'maskable'. Nuestra herramienta proporciona este set exacto para asegurar una puntuación de 100/100.

Elección de Fondo de Splash Screen: Elige un icono con fondo transparente PNG para que se integre perfectamente con tu ajuste 'background_color' en el manifiesto.

Margen de Logo (Zona Segura): Asegúrate de que tu logo esté centrado con al menos un 10% de margen. Pixes.app maneja esto por ti automáticamente.

¿Para quién es nuestro Generador de Iconos PWA?

Desarrolladores Frontend y Full-Stack: Al convertir proyectos React, Vue o Angular a PWA, no pierdas tiempo con iconos. Obtén el set listo para el manifiesto en segundos.

📱 Startups Mobile-First: Antes de lanzar apps nativas, prueba tu branding con un set de iconos de PWA perfectamente escalado.

🛒 Compañías de E-Commerce y SaaS: Anima a los usuarios a 'Añadir a la pantalla de inicio' con un icono que represente la calidad de tu marca.

Proyectos enfocados en Privacidad: Como todo el procesamiento es del lado del cliente, tus activos confidenciales nunca salen de tu computadora.

¿Cómo usar esta herramienta?

Elige tu imagen de mayor resolución, preferiblemente 512x512 en formato PNG. Haz clic en 'Seleccionar imagen'.
Una vez subido, nuestra herramienta genera las versiones 192x192 (General), 512x512 (Splash Screen) y 'maskable-icon-512x512' simultáneamente.
Generamos el array de 'icons' que necesitarás pegar en tu archivo manifest.json. Haz clic en 'Copiar Código' y descarga el set completo en un ZIP.

Herramientas relacionadas

Preguntas frecuentes (FAQ)

¿Qué formato de archivo es mejor para PWA?: El formato PNG es el estándar obligatorio. Los PNG transparentes son los mejores para la compatibilidad.
¿Qué es un icono 'Maskable'?: Permite que Android le dé forma a tu icono en varias formas sin cortar tu logo.
¿Qué iconos debo añadir a mi manifest.json?: Al menos de 192x192 y 512x512. Nuestra herramienta te da el bloque de código completo.
¿Por qué mi icono PWA no aparece tras la instalación?: Suele deberse a una ruta incorrecta en el manifest.json. Asegúrate de que las rutas coincidan con la estructura de carpetas de tu proyecto.