Generador de iconos PWA

Genera iconos para Progressive Web Apps en segundos

Las Progressive Web Apps (PWA) requieren tamaños de icono específicos y un manifiesto de aplicación web válido. favicon.pub genera automáticamente todos los iconos PWA necesarios y un archivo site.webmanifest listo para usar a partir de tu imagen.

¿Qué es un icono PWA?

Los iconos PWA son iconos de aplicación que se usan cuando una Progressive Web App se instala en un dispositivo. Aparecen en varios lugares y le dan a tu app un aspecto nativo:

• Pantallas de inicio de Android
• Lanzadores de aplicaciones
• Conmutadores de tareas
• Pantallas de bienvenida

Los iconos PWA adecuados garantizan que tu aplicación web se vea profesional y coherente en todos los dispositivos.

Tamaños de icono PWA requeridos (recomendados por Google)

Iconos de Chrome para Android

• 192x192 – Icono de pantalla de inicio
• 512x512 – Lanzador de aplicaciones y pantalla de bienvenida

Estos tamaños son necesarios en los navegadores modernos para superar las comprobaciones de instalación de PWA.

Archivos que generamos por ti

Archivos de icono

• android-chrome-192x192.png
• android-chrome-512x512.png

Archivo de manifiesto

• site.webmanifest (preconfigurado)

Ejemplo:

{
  "name": "My PWA App",
  "short_name": "MyApp",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "display": "standalone"
}

Por qué usar favicon.pub para iconos PWA

• Tamaños de icono compatibles con Google
• Webmanifest generado automáticamente
• Sin redimensionado manual
• Funciona con cualquier imagen PNG, JPG o SVG
• Descarga gratuita e instantánea

Cómo añadir iconos PWA a tu sitio

1. Sube tu logotipo o imagen.
2. Descarga los iconos PWA y el manifiesto generados.
3. Coloca los archivos en el directorio raíz de tu sitio web.
4. Añade el enlace del manifiesto a tu HTML.

<link rel="manifest" href="/site.webmanifest">

Icono PWA vs favicon

Preguntas frecuentes

Enlaces internos

• Volver al generador de favicons
• Generador de favicons SVG
• Guía de tamaños de favicon