fix: add favicon, tags and manifest

Author: ruvasqm

index.html

@@ -7,6 +7,33 @@
   <title>Escuadrón 404</title>
   <link rel="stylesheet" href="src/style.css">
   <script type="module" src="src/main.js"></script>
+  <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="shortcut icon" href="/favicon.ico" />
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+  <meta name="apple-mobile-web-app-title" content="Escuadrón 404" />
+  <link rel="manifest" href="/site.webmanifest" />
+
+  <meta property="og:title" content="Escuadrón 404" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://escuadron-404.github.io/" />
+  <meta property="og:image" content="https://escuadron-404.github.io/web-app-manifest-512x512.png" />
+  <meta property="og:image:width" content="512" />
+  <meta property="og:image:height" content="512" />
+  <meta property="og:image:alt"
+    content="The number 404 with top and bottom borders on a black background, representing Escuadrón 404" />
+  <meta property="og:description"
+    content="Un grupo de programadores que empezó en Venezuela" />
+  <meta property="og:site_name" content="Escuadrón 404" />
+  <meta property="og:locale" content="es_ES" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Escuadrón 404" />
+  <meta name="twitter:description"
+    content="Un grupo de programadores que empezó en Venezuela" />
+  <meta name="twitter:image" content="https://escuadron-404.github.io/web-app-manifest-512x512.png" />
+  <meta name="twitter:image:alt"
+    content="The number 404 with top and bottom borders on a black background, representing Escuadrón 404" />
+
   <style>
     kbd {
       background-color: #eee;
@@ -45,9 +72,9 @@
   <div id="main-frame-error" class="interstitial-wrapper">
     <div id="main-content">
       <h1 id="brand">404</h1>
-          <p id="help-text">Por ahora, presiona <kbd>ESPACIO</kbd> para jugar 🤣</p>
-          <div class="icon icon-offline" alt="" style="visibility: hidden;"></div>
-          <div id="diagnose-frame" class="hidden"></div>
+      <p id="help-text">Por ahora, presiona <kbd>ESPACIO</kbd> para jugar 🤣</p>
+      <div class="icon icon-offline" alt="" style="visibility: hidden;"></div>
+      <div id="diagnose-frame" class="hidden"></div>
     </div>
   </div>
   <div class="runner-container"><canvas class="runner-canvas" width="600" height="150"

public/apple-touch-icon.png

@@ -0,0 +1,21 @@
+{
+  "name": "Escuadrón 404",
+  "short_name": "404",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "display": "standalone"
+}