fix(pwa): serve apple-touch-icon + favicons from root, add sizes hint

iOS Safari's Add-to-Home-Screen flow probes /apple-touch-icon.png at the
site root in addition to the <link rel> on the page. Those root paths
currently 302 through Symfony's auth firewall to /login, so iOS gets HTML
where it expects a PNG and falls back to whatever it cached from earlier
installs (the 1 KB placeholder icon). Dropping the real PNG (and the
-precomposed alias) directly in public/ makes nginx serve them as static
files, ahead of the firewall.

Also adds favicon.svg and a multi-size favicon.ico at the root for
browsers/bots that probe / paths instead of reading <link>, and adds
sizes="180x180" to every apple-touch-icon link so iOS doesn't have to
guess.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

frontend/index.html

@@ -9,7 +9,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png" />
     <link rel="manifest" href="/build/manifest.webmanifest" />
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png" />
 
     <meta name="theme-color" content="#fdf6ee" />
     <meta name="apple-mobile-web-app-capable" content="yes" />

public/build/index.html

@@ -9,7 +9,7 @@
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png" />
     <link rel="manifest" href="/build/manifest.webmanifest" />
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png" />
 
     <meta name="theme-color" content="#fdf6ee" />
     <meta name="apple-mobile-web-app-capable" content="yes" />

public/favicon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <clipPath id="wv-left"><rect x="0" y="0" width="32" height="64"/></clipPath>
+    <clipPath id="wv-right"><rect x="32" y="0" width="32" height="64"/></clipPath>
+  </defs>
+  <rect width="64" height="64" rx="12" fill="#1a3a5c"/>
+  <g font-family="system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif"
+     font-weight="900" font-size="56" text-anchor="middle">
+    <text x="32" y="50" fill="#fafafa" clip-path="url(#wv-left)">W</text>
+    <text x="32" y="50" fill="#f0d000" clip-path="url(#wv-right)">W</text>
+  </g>
+</svg>

templates/base.html.twig

@@ -6,7 +6,7 @@
         <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
         <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
         <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-        <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
         {% block stylesheets %}
         {% endblock %}
 

templates/help/index.html.twig

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
     <title>Setup help — WeVisto</title>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

templates/security/login.html.twig

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
     <title>Sign in — WeVisto</title>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

templates/security/register.html.twig

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
     <title>Create account — WeVisto</title>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

templates/setup/configure.html.twig

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
     <title>Name your frame — WeVisto</title>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

templates/setup/index.html.twig

@@ -6,7 +6,7 @@
     <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
     <title>Set up your frame — WeVisto</title>
     <style>
         *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

templates/token/approve.html.twig

@@ -6,7 +6,7 @@
 <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
 <title>Add photo to your frame — WeVisto</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

templates/token/approved.html.twig

@@ -6,7 +6,7 @@
 <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
 <title>Photo added — WeVisto</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

templates/token/decline.html.twig

@@ -6,7 +6,7 @@
 <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
 <title>Decline photo — WeVisto</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

templates/token/declined.html.twig

@@ -6,7 +6,7 @@
 <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
 <title>Photo declined — WeVisto</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

templates/token/invalid.html.twig

@@ -6,7 +6,7 @@
 <link rel="icon" type="image/svg+xml" href="/build/favicon.svg">
     <link rel="icon" type="image/png" sizes="32x32" href="/build/icons/favicon-32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/build/icons/favicon-16.png">
-    <link rel="apple-touch-icon" href="/build/icons/apple-touch-icon.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/build/icons/apple-touch-icon.png">
 <title>Link invalid — WeVisto</title>
 <style>
 *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}