Web App Manifests are one of the key pieces to making your web app look and feel like a native app. Learn more
While everything is optional, once certain criteria is met, some browsers will automatically display an install banner for your app

Name of your web app
This will be used when there is insufficient space to display the full name, such as the homescreen
The purpose of your web app
The primary language for the name, short name and description properties. For example, en or en-CA
More...
Your homescreen shortcut will load this URL
The scope of your domain that this manifest applies to
More...
More...
Nombre unico para cada página
Color used in the browser and system UI, to help make your app immersive
URL Sizes Type
Add another...
This is typically your <body> background color, used to set the background color until the stylesheets for your app are loaded.
More...
URL Sizes Type
Add another...
More...
Copy manifest.json
{
"lang": "en-US",
"start_url": "/",
"display": "standalone"
}
Copy <head>
<!DOCTYPE html>

<!-- ⊙⩌⨀
2006 - 2021 © hiHello.monster! Inc. Marketing Technology Stack
2020 - 2021 © hiHello.Generador-a-Full-Web! Generador de head al full

ˆ⩌ ˆ¿ Quién hizo todo esto ?
http: //twitter.com/luisangelmaciel + Gittubers ⪘ -->

<html lang="es-MX" prefix="og: https://ogp.me/ns#">

<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="content-encoding" content="gzip">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="vary-header" content="Accept-Encoding">

<title>XXXXXXX </title>
<meta name="description" content="XXXXXXXXXXXXXX">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords " content="XXXXXXXXXXXXXXXX">
<meta name="author" content="[ hiHello.monster ] Luis Angel Maciel">
<meta name="generator " content="HiHello.Content-Managament! Creador de contenido ">
<meta name="rights" content="®hiHello.monster!">
<meta name="theme-color" content="#017dbb">
<meta name="robots" content="follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large" />
<link rel="canonical" href="xxxxxxxxxxxxxxxxxxxxx">

<meta name="googlebot" content="index, follow">
<meta name="googlebot-video" content="index" />
<meta name="googlebot-image" content="index" />
<meta name="googlebot-news" content="index, follow">
<meta name="msapplication-TileImage" content="xxxxxxxxxxxxxxxxxxxxxxx" />
<meta name="msapplication-TileColor " content="xxxxxxxxxxxxxxxxxxxxxxx">
<meta name="application-name" content="hiHello.monster">

<meta property="og:locale" content="es_ES">
<meta property="og:image:secure_url" content="xxxxxxxxxxxxxxxxxxxxx">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">
<meta property="og:image:alt" content="xxxxxxxxxxxxxxxxx">
<meta property="og:image:type" content="image/jpeg">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<!-- aqui tiene varias opciones -->
<meta property="og:type" content="DE QUE ES Y AQUI TIENE VARIANTES: website, article, ">
<!-- Opcion website -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="XXXXXXXXXXXXXXXXXXXX">
<!-- Opcion article y si es que es article y estuvo publicado previamente, si no pase hasta name="twitter:card" -->
<meta property="og:type" content="article">
<meta property="og:title" content="XXXXXXXXXXXXXXXXXXXX">
<meta property="og:description" content="XXXXXXXXXXXXXXXXXXXX">
<meta property="og:url" content="https://XIIER.COM/TITULO/">
<meta property="og:site_name" content="XXXXXXXXXXXXXXXXXXXX">
<!-- article basic fin property -->
<meta property="article:publisher" content="https://www.XXXXXXXXXXXXXXXXXXXX">
<meta property="article:author" content="http://XXXXXXXXXXXXXXXXXXXX">
<meta property="article:section" content="Marketing">
<meta property="og:updated_time" content="2021-05-11T09:47:56-03:00 XXXXXXXXXXXXXXXXXXXX">
<meta property="fb:app_id" content="110849XXXXXXXXXXXXXXXXXXXX869668">
<!-- article advaned fin property -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@XXXXXXXXXXXXXXXXXXXX" />
<meta name="twitter:title " content="Templete HTML5 hiHello.monster ">
<meta name="twitter:description " content="XXXXXXXXXXXXXXXXXXXX">
<meta name="twitter:site " content="@XXXXXXXXXXXXXXXXXXXX ">
<meta name="twitter:creator " content="@XXXXXXXXXXXXXXXXXXXX ">
<meta name="twitter:url" content="XXXXXXXXXXXXXXXXXXXX">
<meta name="twitter:image" content="XXXXXXXXXXXXXXXXXXXXg">
<meta name="twitter:image:alt" property="og:image:alt" content="XXXXXXXXXXXXXXXXXXXX">
<!-- son las mismas imagenes que estan indicadas en el manifiesto -->
<link rel="icon" type="image/x-icon" sizes="32x32" href="img/ico/cropped-fav-color-32x32.png">
<link rel="icon" type="image/x-icon" sizes="192x192" href="img/ico/cropped-fav-color-192x192.png">
<link rel="icon" type="image/png" sizes="192x192 " href="img/ico/android-icon-192x192.png ">
<link rel="icon" type="image/png" sizes="32x32 " href="img/ico/favicon-32x32.png ">
<link rel="icon" type="image/png" sizes="96x96 " href="img/ico/favicon-96x96.png ">
<link rel="icon" type="image/png" sizes="16x16 " href="img/ico/favicon-16x16.png ">
<link rel="apple-touch-icon " sizes="57x57 " href="img/ico/apple-icon-57x57.png ">
<link rel="apple-touch-icon " sizes="60x60 " href="img/ico/apple-icon-60x60.png ">
<link rel="apple-touch-icon " sizes="72x72 " href="img/ico/apple-icon-72x72.png ">
<link rel="apple-touch-icon " sizes="76x76 " href="img/ico/apple-icon-76x76.png ">
<link rel="apple-touch-icon " sizes="114x114 " href="img/ico/apple-icon-114x114.png ">
<link rel="apple-touch-icon " sizes="120x120 " href="img/ico/apple-icon-120x120.png ">
<link rel="apple-touch-icon " sizes="144x144 " href="img/ico/apple-icon-144x144.png ">
<link rel="apple-touch-icon " sizes="152x152 " href="img/ico/apple-icon-152x152.png ">
<link rel="apple-touch-icon " sizes="180x180 " href="img/ico/apple-icon-180x180.png ">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/ico/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/ico/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/ico/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/ico/apple-touch-icon-152x152.png">

<link rel="profile" href="https://gmpg.org/xfn/11">

<link rel="preconnect" href="https://www.googletagmanager.com" />
<link rel="preconnect" href="https://www.google-analytics.com" />
<link rel="preconnect " href="https://fonts.gstatic.com ">
<link rel="https://api.w.org/" href="wp-json/" />
<link rel="prefetch" href="XXXXXXXXXXXXXXXXXXXXxiibicon/fonts/xiibicon.eot">
<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" as="style">
<link rel="preload" href="https://hihello.monster/css/bootstrap.min.css" as="style" >
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX








<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Helpful notes
  • Browsers will automatically display an install banner for your web app when it meets certain criteria
  • You can append a parameter to your start URL to detect when your app is launched from homescreen, or you can use the display-mode CSS media query
  • For games, you can set fullscreen display and landscape orientation
  • If your app is under a subdirectory (such as this one), make sure you set start_url and scope to that directory, otherwise launching will default to /
  • Not all browsers implement the manifest yet, however the <meta> tags will help bridge that gap
  • You can even link to your native app as a related app and get the benefit of the install banner
  • To determine if the install prompt was successful, or defer it, use the beforeinstallprompt event
  • Make sure to add a Service Worker so that your app can work offline and even send notifications