---
title: Web App Manifest
slug: Web/Manifest
translation_of: Web/Manifest
---
<p>El manifiesto de aplicaciones web proporciona información sobre una aplicación (como nombre, autor, icono y descripción) en un documento simplificado. Su principal propósito es crear <a href="/en-US/docs/Web/Apps/Progressive">progressive web apps</a>: aplicaciones web que se pueden instalar desde la pantalla principal de un dispositivo sin necesidad de hacerlo a traves de una app store (y otras ventajas como disponibilidad offline y enviar notificaciones push cuando cambia el contenido de la aplicación.)</p>

<h2 id="Manifiesto_de_ejemplo">Manifiesto de ejemplo</h2>

<pre class="brush: json notranslate">{
  "name": "Google I/O 2015",
  "short_name": "I/O 2015",
  "start_url": "./?utm_source=web_app_manifest",
  "display": "standalone",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "web"
  }, {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.google.samples.apps.iosched"
  }]
}</pre>

<h2 id="Propiedades">Propiedades</h2>

<h3 id="background_color"><code>background_color</code></h3>

<p>Define el color de fondo deseado para la aplicación. Este valor repite lo definido en la hoja de estilos de la aplicación, pero puede ser utilizado por los navegadores para pintar el color de fondo de una app si el manifiesto está disponible antes de que la hoja de estilos se haya cargado. Esto suaviza la transición entre lanzar una aplicación y cargar el contenido de la misma.</p>

<pre class="brush: json notranslate">"background_color": "red"</pre>

<div class="note">
<p><strong>Note</strong>: El <code>background_color</code> únicamente está destinado a mejorar la experiencia de usuario mientras se carga la aplicación y no se debe usar como color de fondo cuando la hoja de estilos de la aplicación esté disponible.</p>
</div>

<h3 id="description"><code>description</code></h3>

<p>Proporciona una descripción general sobre qué hace la aplicación.</p>

<pre class="brush: json notranslate">"description": "The app that helps you find the best food in town!"</pre>

<h3 id="dir"><code>dir</code></h3>

<p>Especifica la dirección del texto para <code>name</code>, <code>short_name</code>, y <code>description</code>. Junto con <code>lang</code>, ayuda a representar correctamente los idiomas que se escriben de derecha a izquierda (right-to-left).</p>

<pre class="brush: json notranslate" dir="rtl">"dir": "rtl",
"lang": "ar",
"short_name": "أنا من التطبيق!"</pre>

<p>Puede tener uno de los siguentes valores:</p>

<ul>
 <li><code>ltr</code> (izquierda a derecha)</li>
 <li><code>rtl</code> (derecha a izquierda)</li>
 <li><code>auto</code> (indica al navegador que use el algoritmo Unicode bidirectional para hacer una estimación apropiada sobre la dirección del texto.)</li>
</ul>

<div class="note">
<p><strong>Note</strong>: Cuando se omite este valor, por defecto es <code>auto</code>.</p>
</div>

<h3 id="display"><code>display</code></h3>

<p>Define el modo de visualización preferido para la aplicación web.</p>

<pre class="brush: json notranslate">"display": "standalone"</pre>

<p>Los valores aceptados son:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Display Mode</th>
   <th scope="col">Description</th>
   <th scope="col">Fallback Display Mode</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>fullscreen</code></td>
   <td>Se utiliza toda la pantalla disponible no se muestran elementos del user agent {{Glossary("chrome")}}.</td>
   <td><code>standalone</code></td>
  </tr>
  <tr>
   <td><code>standalone</code></td>
   <td>La aplicación se mostrará como una app independiente. Así la aplicación puede tener su propia ventana, su propio icono en el lanzador de aplicaciones, etc. En este modo, the user agent excluirá los elementos de interfaz para controlar la navegación, pero puede incluir otros elementos como la barra de estado.</td>
   <td><code>minimal-ui</code></td>
  </tr>
  <tr>
   <td><code>minimal-ui</code></td>
   <td>La aplicación se mostrará como una app independiente, pero tendrá un mínimo de elementos de interfaz para controlar la navegación. Estos elementos podrán variar según navegador.</td>
   <td><code>browser</code></td>
  </tr>
  <tr>
   <td><code>browser</code></td>
   <td>La aplicación se abrirá en una pestaña nueva del navegador o una ventana nueva, dependiendo del navegador y plataforma. Esto es por defecto. </td>
   <td>(None)</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>Note</strong>: Puedes aplicar selectivamente CSS a tu app basandote en el modo de visualización, usando la característica <a href="/docs/Web/CSS/@media/display-mode">display-mode</a>. Se puede utilizar para proporcionar una experiencia de usuario consistente al lanzar un site desde una URL y lanzarlo desde un icono de escritorio.</p>
</div>

<h3 id="icons"><code>icons</code></h3>

<p>Especifica un <em>array</em> de imágenes que pueden servir como iconos de aplicación en diferentes contextos. Por ejemplo, se pueden utilizar para representar la aplicación entre un listado de aplicaciones, o para integrar la aplicación web con un gestor de tareas del sistema operativo y/o las preferencias del sistema.</p>

<pre class="brush: json notranslate">"icons": [
  {
    "src": "icon/lowres.webp",
    "sizes": "48x48",
    "type": "image/webp"
  },
  {
    "src": "icon/lowres",
    "sizes": "48x48"
  },
  {
    "src": "icon/hd_hi.ico",
    "sizes": "72x72 96x96 128x128 256x256"
  },
  {
    "src": "icon/hd_hi.svg",
    "sizes": "72x72"
  }
]</pre>

<p>Los objetos de imagen pueden contener los siguientes valores:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Member</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>sizes</code></td>
   <td>Una cadena que contiene separados por espacios las dimensiones de la imagen. </td>
  </tr>
  <tr>
   <td><code>src</code></td>
   <td>La ruta de acceso al archivo de imagen.</td>
  </tr>
  <tr>
   <td><code>type</code></td>
   <td>A hint as to the media type of the image.The purpose of this member is to allow a user agent to quickly ignore images of media types it does not support.</td>
  </tr>
 </tbody>
</table>

<h3 id="lang"><code>lang</code></h3>

<p>Especifica el idioma principal para in the <code>name</code> and <code>short_name</code> members. This value is a string containing a single language tag.</p>

<pre class="brush: json notranslate">"lang": "en-US"</pre>

<h3 id="name"><code>name</code></h3>

<p>Provides a human-readable name for the application as it is intended to be displayed to the user, for example among a list of other applications or as a label for an icon.</p>

<pre class="brush: json notranslate">"name": "Google I/O 2015" </pre>

<h3 id="orientation"><code>orientation</code></h3>

<p>Define la orientación por defecto for all the web application's top level {{Glossary("Browsing context", "browsing contexts")}}.</p>

<pre class="brush: json notranslate"><code>​​"orientation": "portrait-primary"</code></pre>

<p>Orientation puede ser alguno de los siguentes valores:</p>

<ul>
 <li><code>any</code></li>
 <li><code>natural</code></li>
 <li><code>landscape</code></li>
 <li><code>landscape-primary</code></li>
 <li><code>landscape-secondary</code></li>
 <li><code>portrait</code></li>
 <li><code>portrait-primary</code></li>
 <li><code>portrait-secondary</code></li>
</ul>

<h3 id="prefer_related_applications"><code>prefer_related_applications</code></h3>

<p>Especifica un valor booleano que sugiere que el agente de usuario le indique al usuario que las aplicaciones específicas relacionadas (ver abajo) están disponibles, y recomendadas sobre la aplicación web. Esto solamente debería ser usado si la aplicación nativa relacionada realmente ofrece algo que la aplicación web no puede hacer.  </p>

<pre class="brush: json notranslate">"prefer_related_applications": false</pre>

<div class="note">
<p><strong>Note</strong>: Si se omite, el valor por defecto es <code>false</code>.</p>
</div>

<h3 id="related_applications"><code>related_applications</code></h3>

<p>Specifies an array of "application objects" representing native applications that are installable by, or accessible to, the underlying platform — for example a native Android application obtainable through the Google Play Store. Such applications are intended to be alternatives to the web application that provide similar or equivalent functionality — like the native app version of the web app.</p>

<pre class="brush: json notranslate">"related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.app1",
    "id": "com.example.app1"
  }, {
    "platform": "itunes",
    "url": "https://itunes.apple.com/app/example-app1/id123456789"
  }]</pre>

<p>Los objetos Application pueden contener los siguientes valores:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Member</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>platform</code></td>
   <td>The platform on which the application can be found.</td>
  </tr>
  <tr>
   <td><code>url</code></td>
   <td>The URL at which the application can be found.</td>
  </tr>
  <tr>
   <td><code>id</code></td>
   <td>The ID used to represent the application on the specified platform.</td>
  </tr>
 </tbody>
</table>

<h3 id="scope"><code>scope</code></h3>

<p>Define el ámbito de navegación en el contexto de la aplicación web. Esto basicamente restringe qué paginas se pueden ver cuando se aplica el manifiesto. Si el usuario navega fuera del ámbito de la aplicación, continúa como en una web normal. </p>

<pre class="brush: json notranslate">"scope": "/myapp/"</pre>

<h3 id="short_name"><code>short_name</code></h3>

<p>Proporciona un nombre corto para la aplicación. Está destinado para su uso cuando hay poco espacio para mostrar el nombre completo de la aplicación.</p>

<pre class="brush: json notranslate">"short_name": "I/O 2015"
</pre>

<h3 id="start_url"><code>start_url</code></h3>

<p>Especifica la URL que se carga cuando el usuario lanza la aplicación desde un dispositivo. </p>

<pre class="brush: json notranslate">"start_url": "./?utm_source=web_app_manifest"</pre>

<h3 id="theme_color"><code>theme_color</code></h3>

<p>Define el color por defecto para la aplicación. Esto en ocasiones afecta a como se muestra por el OS (e.g., en el lanzador de aplicaciones de Android, el color envuelve la aplicación).  </p>

<pre class="brush: json notranslate">"theme_color": "aliceblue"</pre>

<h2 id="Splash_screens">Splash screens</h2>

<p>En Chrome 47 y posteriores, se muestra una pantalla de bienvenida para las aplicaciones web que se inician desde la pantalla de inicio. Esta pantalla de bienvenida se genera de automáticamente mediante las propiedades del manifiesto de la aplicación web, especificamente: <code>name</code>, <code>background_color</code>, y el icono de la lista <code>icons</code> que sea el más cercano a los 128dpi para el dispositivo.</p>

<h2 id="Tipo_Mime">Tipo Mime</h2>

<p>Los manifiestos web se deben servir con el tipo MIME  <code>application/manifest+json</code>. Sin embargo, esto es opcional.  </p>

<h2 id="Especificación">Especificación</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('Manifest')}}</td>
   <td>{{Spec2('Manifest')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
  <tr>
   <td><code>background_color</code> and <code>theme_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(39.0)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>32.0</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(39.0)}}</td>
  </tr>
  <tr>
   <td><code>background_color</code> and <code>theme_color</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(46.0)}} [1]</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(46.0)}} [1]</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Does not support <code>lang</code> or <code>scope</code>.</p>