Iconos Web, PWA y Chrome

El ZIP Web contiene favicon.ico, PNG de 16/32 px, icono Apple touch de 180 px, iconos PWA de 192/512 px, site.webmanifest y og.png de 1200x630.

Contenido del ZIP Web

Los dos PNG PWA son iconos cuadrados normales. Sus nombres y tamaños coinciden con el array icons de site.webmanifest; og.png es una imagen separada para compartir.

Web/
  favicon.ico
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png
  android-chrome-192x192.png
  android-chrome-512x512.png
  site.webmanifest
  og.png
  README.txt

Conecta los iconos a tu web

1. Copia los archivos de Web al directorio público del sitio y publícalos en la raíz del dominio, o ajusta las rutas al directorio elegido.
2. Edita name y short_name en site.webmanifest. start_url y scope son relativos al manifiesto; las rutas de iconos exportadas empiezan por /. Cámbialas si las imágenes están en un subdirectorio.
3. Añade los enlaces de manifiesto, favicon y Apple touch al head del HTML. Usa HTTPS o localhost. En las herramientas del navegador, revisa el manifiesto y que cada URL devuelva una imagen, no una página HTML de respaldo.

<link rel="manifest" href="/site.webmanifest">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

{
  "name": "My App",
  "short_name": "App",
  "start_url": "./",
  "scope": "./",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

Estos iconos no están preparados como imágenes maskable. El ZIP no añade service worker ni soporte sin conexión; los iconos por sí solos no garantizan la instalación. Prueba el navegador y dispositivo de destino.

Generador de Favicon y Iconos PWA

Exporta iconos y gráficos promocionales para Chrome

Sube una imagen y selecciona Chrome para descargar iconos PNG y gráficos rectangulares. Los gráficos centran la imagen sobre blanco; termina el diseño antes de enviarlo a la tienda.

• Iconos de extensión: PNG de 16, 32, 48 y 128 px y un archivo inicial de Manifest V3.
• Icono de tienda (128x128): PNG separado para la ficha de Chrome Web Store.
• Mosaico pequeño (440x280): PNG opaco para el espacio promocional pequeño.
• Marquee (1400x560): Gráfico promocional grande opcional, distinto de una captura de pantalla.
• Capturas: Captura la extensión por separado a 1280x800 o 640x400. Esta herramienta no captura ni enmarca pantallas.

Generador de iconos y gráficos para extensiones Chrome

Referencias oficiales

• Web App Manifest
• Chrome Web Store