Tutoriales paso a paso Web y HTTP

Cómo hacer instalable un sitio web (manifiesto de aplicación web)

Convierta un sitio web en una aplicación instalable: sírvalo por HTTPS, prepare iconos de 192 y 512 píxeles, escriba un manifiesto de aplicación web, enlácelo desde la página y compruebe los requisitos de instalación.

Última revisión:

AdSense Placeholder
Slot: header_reference_page
En esta página

Pasos

  1. Sirva el sitio por HTTPS

    La instalación exige un origen seguro. Se permite localhost durante el desarrollo.

  2. Prepare los iconos

    Cree iconos PNG cuadrados de 192 × 192 y 512 × 512 píxeles, más una versión maskable con el dibujo dentro de la zona segura central para que Android pueda recortarla en círculo o cuadrado redondeado.

  3. Escriba el manifiesto

    Rellene el Generador de Manifiesto de Aplicación Web con el nombre, el nombre corto, la URL de inicio, el modo de visualización, los colores y la lista de iconos, y copie el JSON en manifest.webmanifest.

  4. Enlácelo desde cada página

    Añada <link rel="manifest"> y una etiqueta meta theme-color al <head>. El generador imprime estas etiquetas por usted.

  5. Compruebe los requisitos

    El generador comprueba que haya nombre, URL de inicio, visualización standalone y ambos tamaños de icono (obligatorios), y aconseja un icono maskable, un nombre corto de 12 caracteres como máximo, un color de tema y una descripción.

  6. Pruebe en dispositivos reales

    En Chrome DevTools abra Application y luego Manifest para ver las advertencias, y pruebe la propuesta de instalación en un teléfono. Mire también cómo quedan el icono y el color de tema en la pantalla de inicio.

Qué necesita

Un sitio servido por HTTPS, un logotipo cuadrado para hacer los iconos y acceso al encabezado de la página.

Ejemplo

Este manifiesto supera todas las comprobaciones de instalación del generador:

{
  "name": "Example App",
  "short_name": "Example",
  "description": "A small example application",
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#0d6efd",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ]
}

Y las etiquetas que van en el encabezado de la página:

<link rel="manifest" href="https://example.com/manifest.webmanifest">
<meta name="theme-color" content="#0d6efd">
<link rel="apple-touch-icon" href="https://example.com/icons/icon-192.png">

Errores comunes

  • Las rutas relativas de los iconos se resuelven respecto a la URL del manifiesto, no de la página.
  • La start_url debe cargarse sin una redirección de inicio de sesión, o la aplicación instalada se abrirá en blanco.
  • Use display: standalone para una ventana de aspecto de aplicación; browser mantiene la interfaz normal del navegador y no es instalable por sí solo.
  • iOS usa apple-touch-icon y su propio flujo de añadir a la pantalla de inicio, así que conserve también ese enlace.

Pruebe estas herramientas

Generador de Manifiesto de Aplicación Web

Genere un manifiesto de aplicación web (manifest.webmanifest) para una aplicación web progresiva: nombre, iconos, colores.

Generador de Favicon desde Imagen

Recorte desde el centro y redimensione una imagen subida a un favicon PNG cuadrado en un tamaño de icono común, luego descárguelo.

Redimensionador de Imágenes

Redimensione una imagen subida a dimensiones exactas en píxeles, con bloqueo opcional de relación de aspecto, luego descargue el resultado.

Generador de Meta Etiquetas

Genere las etiquetas de título, meta descripción, canonical, robots, Open Graph y Twitter Card de su página.

Véase también

  • Guía Cómo funcionan las metaetiquetas SEO
    Título, descripción, canonical, hreflang, robots.txt.
  • Glosario Favicon
    Un favicon es el pequeño icono que un navegador muestra en una pestaña, marcador o historial para identificar un sitio web.
  • Glosario HTTPS
    HTTPS es HTTP enviado por una conexión TLS cifrada, lo que mantiene el tráfico privado y confirma la identidad del servidor.
  • Glosario JSON-LD
    JSON-LD es una forma de incrustar datos estructurados en una página web como JSON, con tipos de schema.org.
  • Hoja de referencia Referencia rápida de CSS
    Unidades CSS, atajos, sombras, degradados, tipografía fluida con clamp(), cuadrícula, curvas de aceleración, especificidad y contraste.

Preguntas frecuentes

No en los navegadores Chromium actuales: basta un manifiesto válido servido por HTTPS para que aparezca la propuesta de instalación. Un service worker sigue haciendo falta para el uso sin conexión y otras funciones.

Compruebe el HTTPS, que el manifiesto esté enlazado y se analice bien, que tenga nombre, una URL de inicio, un modo de visualización standalone e iconos de 192 y 512 píxeles, y que la aplicación no esté ya instalada.

Volver a los tutoriales paso a paso
AdSense Placeholder
Slot: footer_leaderboard