Prevent app icon loading when opening the app menu

Compile into app code by importing the icon in JS.

app/components/app-menu/home.gjs

@@ -1,11 +1,15 @@
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
+import { htmlSafe } from '@ember/template';
 import Icon from '#components/icon';
+import iconRounded from '../../icons/icon-rounded.svg?raw';
 
 <template>
   <div class="sidebar-header">
     <h2>
-      <img src="/icons/icon-rounded.svg" alt="" width="32" height="32" />
+      <span class="app-logo-icon">
+        {{htmlSafe iconRounded}}
+      </span>
       Marco
     </h2>
     <button type="button" class="close-btn" {{on "click" @onClose}}>

app/icons/icon-rounded.svg

@@ -0,0 +1,45 @@
+<svg
+  width="1024"
+  height="1024"
+  viewBox="0 0 1024 1024"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <!-- Background -->
+  <rect
+    x="0"
+    y="0"
+    width="1024"
+    height="1024"
+    rx="220"
+    fill="#F6E9A6"
+  />
+
+  <!-- Subtle map grid (kept well outside safe zone) -->
+  <g stroke="#E6D88A" stroke-width="10" opacity="0.6">
+    <line x1="256" y1="0" x2="256" y2="1024" />
+    <line x1="512" y1="0" x2="512" y2="1024" />
+    <line x1="768" y1="0" x2="768" y2="1024" />
+
+    <line x1="0" y1="256" x2="1024" y2="256" />
+    <line x1="0" y1="512" x2="1024" y2="512" />
+    <line x1="0" y1="768" x2="1024" y2="768" />
+  </g>
+
+  <!-- Location pin (exact app shape, larger, centered, safe-zone compliant) -->
+  <!-- Safe zone target: ~680px diameter -->
+  <g
+    transform="
+      translate(512 512)
+      scale(22)
+      translate(-12 -12)
+    "
+    fill="#ea4335"
+    stroke="#b31412"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
+    <circle cx="12" cy="10" r="3" fill="#b31412" stroke="none" />
+  </g>
+</svg>

app/styles/app.css

@@ -632,6 +632,17 @@ body {
 
 /* Icons */
 
+.app-logo-icon {
+  display: inline-flex;
+  width: 32px;
+  height: 32px;
+}
+
+.app-logo-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
 span.icon {
   display: inline-block;
 }

package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "vite build --outDir release/",
-    "build:icons": "for size in 32 48 144 180 192 512; do if [ \"$size\" -le 64 ]; then magick public/icons/icon.svg -define svg:remove-groups=map-grid -resize ${size}x${size} public/icons/icon-${size}.png; else rsvg-convert -w $size -h $size public/icons/icon.svg -o public/icons/icon-${size}.png; fi; done && rsvg-convert -w 512 -h 512 public/icons/icon.svg -o public/icons/icon-maskable.png",
+    "build:icons": "cp public/icons/icon-rounded.svg app/icons/icon-rounded.svg && for size in 32 48 144 180 192 512; do if [ \"$size\" -le 64 ]; then magick public/icons/icon.svg -define svg:remove-groups=map-grid -resize ${size}x${size} public/icons/icon-${size}.png; else rsvg-convert -w $size -h $size public/icons/icon.svg -o public/icons/icon-${size}.png; fi; done && rsvg-convert -w 512 -h 512 public/icons/icon.svg -o public/icons/icon-maskable.png",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
     "lint:css": "stylelint \"**/*.css\"",