12 files changed, 81 insertions, 20 deletions
diff --git a/src/frontend/app/root.tsx b/src/frontend/app/root.tsx
index a1219ae..f58cfb0 100644
--- a/src/frontend/app/root.tsx
+++ b/src/frontend/app/root.tsx
@@ -38,10 +38,10 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta name="apple-mobile-web-app-capable" content="yes" />
         <meta name="apple-mobile-web-app-status-bar-style" content="default" />
 
-        <link rel="icon" type="image/png" href="/icon-round.png" />
-        <link rel="apple-touch-icon" href="/icon-round.png" sizes="256x256" />
+        <link rel="icon" type="image/png" href="/icon-512.png" />
+        <link rel="apple-touch-icon" href="/icon-512.png" sizes="512x512" />
 
-        <meta name="theme-color" content="#F7F7FF" />
+        <meta name="theme-color" content="#27187D" />
         <link rel="canonical" href="https://enmarcha.app/" />
 
         <meta
@@ -57,10 +57,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <meta property="og:title" content="EnMarcha" />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://enmarcha.app/" />
-        <meta
-          property="og:image"
-          content="https://enmarcha.app/icon-round.png"
-        />
+        <meta property="og:image" content="https://enmarcha.app/icon-512.png" />
         <meta
           property="og:description"
           content="Aplicación web para encontrar paradas y tiempos de llegada de los autobuses urbanos"
@@ -295,6 +292,17 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </head>
       <body>
         {children}
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              if ("serviceWorker" in navigator) {
+                window.addEventListener("load", () => {
+                  navigator.serviceWorker.register("/pwa-worker.js").catch(console.error);
+                });
+              }
+            `,
+          }}
+        />
         <ScrollRestoration />
         <Scripts />
       </body>
@@ -302,15 +310,34 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
+/**
+ * This is the "root HTML" that shows up before React/Remix kicks in.
+ * It will be baked into the static index.html.
+ */
+export function HydrateFallback() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        backgroundColor: "#27187D",
+      }}
+    >
+      <img
+        src="/icon-512.png"
+        alt="EnMarcha"
+        style={{ width: "128px", height: "128px", borderRadius: "100%" }}
+      />
+    </div>
+  );
+}
+
 import { AppShell } from "./components/layout/AppShell";
 
 export default function App() {
-  if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.register("/pwa-worker.js").catch((error) => {
-      console.error("Error registering SW:", error);
-    });
-  }
-
   return (
     <QueryClientProvider client={queryClient}>
       <AppProvider>
diff --git a/src/frontend/public/icon-192.png b/src/frontend/public/icon-192.png
new file mode 100644
index 0000000..8b08cf0
--- /dev/null
+++ b/src/frontend/public/icon-192.png
diff --git a/src/frontend/public/icon-512.png b/src/frontend/public/icon-512.png
new file mode 100644
index 0000000..728236f
--- /dev/null
+++ b/src/frontend/public/icon-512.png
diff --git a/src/frontend/public/icon-maskable-192.png b/src/frontend/public/icon-maskable-192.png
new file mode 100644
index 0000000..797467d
--- /dev/null
+++ b/src/frontend/public/icon-maskable-192.png
diff --git a/src/frontend/public/icon-maskable-512.png b/src/frontend/public/icon-maskable-512.png
new file mode 100644
index 0000000..b782570
--- /dev/null
+++ b/src/frontend/public/icon-maskable-512.png
diff --git a/src/frontend/public/icon-inverse.png b/src/frontend/public/icon-monochrome-256.png
index 1fde09d..1fde09d 100644
--- a/src/frontend/public/icon-inverse.png
+++ b/src/frontend/public/icon-monochrome-256.png
diff --git a/src/frontend/public/icon-round.png b/src/frontend/public/icon-round.png
deleted file mode 100644
index 253847a..0000000
--- a/src/frontend/public/icon-round.png
+++ /dev/null
diff --git a/src/frontend/public/icon-splash.png b/src/frontend/public/icon-splash.png
deleted file mode 100644
index 04c32ea..0000000
--- a/src/frontend/public/icon-splash.png
+++ /dev/null
diff --git a/src/frontend/public/icon-square.png b/src/frontend/public/icon-square.png
deleted file mode 100644
index 4a5f0d7..0000000
--- a/src/frontend/public/icon-square.png
+++ /dev/null
diff --git a/src/frontend/public/icon.svg b/src/frontend/public/icon.svg
new file mode 100644
index 0000000..3ae0a52
--- /dev/null
+++ b/src/frontend/public/icon.svg
@@ -0,0 +1,5 @@
+<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M41 196C41 201.039 43.0018 205.872 46.565 209.435C50.1282 212.998 54.9609 215 60 215C65.0391 215 69.8718 212.998 73.435 209.435C76.9982 205.872 79 201.039 79 196C79 190.961 76.9982 186.128 73.435 182.565C69.8718 179.002 65.0391 177 60 177C54.9609 177 50.1282 179.002 46.565 182.565C43.0018 186.128 41 190.961 41 196Z" stroke="white" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M196 79C201.039 79 205.872 76.9982 209.435 73.435C212.998 69.8718 215 65.0391 215 60C215 54.9609 212.998 50.1282 209.435 46.565C205.872 43.0018 201.039 41 196 41C190.961 41 186.128 43.0018 182.565 46.565C179.002 50.1282 177 54.9609 177 60C177 65.0391 179.002 69.8718 182.565 73.435C186.128 76.9982 190.961 79 196 79Z" stroke="white" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M119 195H172.167C181.14 195 189.745 191.471 196.09 185.188C202.435 178.906 206 170.385 206 161.5C206 152.615 202.435 144.094 196.09 137.812C189.745 131.529 181.14 128 172.167 128H94.8333C85.8602 128 77.2545 124.471 70.9096 118.188C64.5646 111.906 61 103.385 61 94.5C61 85.6152 64.5646 77.0944 70.9096 70.8119C77.2545 64.5295 85.8602 61 94.8333 61H138.333" stroke="white" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/frontend/public/manifest.webmanifest b/src/frontend/public/manifest.webmanifest
index 9df5a44..c487e4c 100644
--- a/src/frontend/public/manifest.webmanifest
+++ b/src/frontend/public/manifest.webmanifest
@@ -4,10 +4,16 @@
   "name": "EnMarcha",
   "description": "Aplicación de transporte pública para Galicia. Consulta horarios, llegadas y rutas de trenes, autobuses interurbanos y distintos urbanos.",
   "short_name": "EnMarcha",
-  "start_url": "/",
+  "start_url": "https://enmarcha.app/",
   "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "standalone",
+    "browser"
+  ],
   "orientation": "portrait",
   "lang": "es",
+  "dir": "ltr",
   "background_color": "#27187D",
   "theme_color": "#27187D",
   "scope": "/",
@@ -17,21 +23,39 @@
   "prefer_related_applications": false,
   "icons": [
     {
-      "src": "/icon-splash.png",
+      "src": "/icon-192.png",
       "type": "image/png",
-      "sizes": "any",
+      "sizes": "192x192",
       "purpose": "any"
     },
     {
-      "src": "/icon-square.png",
+      "src": "/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon.svg",
+      "type": "image/svg+xml",
       "sizes": "any",
+      "purpose": "any"
+    },
+    {
+      "src": "/icon-maskable-192.png",
       "type": "image/png",
+      "sizes": "192x192",
       "purpose": "maskable"
     },
     {
-      "src": "/icon-inverse.png",
+      "src": "/icon-maskable-512.png",
       "type": "image/png",
-      "sizes": "any",
+      "sizes": "512x512",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/icon-monochrome-256.png",
+      "type": "image/png",
+      "sizes": "256x256",
       "purpose": "monochrome"
     }
   ],
diff --git a/src/frontend/public/pwa-worker.js b/src/frontend/public/pwa-worker.js
index d959b66..0a9be9c 100644
--- a/src/frontend/public/pwa-worker.js
+++ b/src/frontend/public/pwa-worker.js
@@ -1,6 +1,11 @@
 const CACHE_VERSION = "20260101a";
 const STATIC_CACHE_NAME = `static-cache-${CACHE_VERSION}`;
-const STATIC_CACHE_ASSETS = ["/favicon.ico", "/icon-square.png", "/icon-round.png", "/icon-inverse.png"];
+const STATIC_CACHE_ASSETS = [
+  "/favicon.ico",
+  "/icon-square-256.png",
+  "/icon-round-256.png",
+  "/icon-inverse.png",
+];
 
 const EXPR_CACHE_AFTER_FIRST_VIEW = /(\/assets\/.*)/;