Add default SVG favicon fallback

public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="12" fill="#6366f1"/>
+  <text x="32" y="44" font-family="Arial,sans-serif" font-size="40" font-weight="bold" fill="white" text-anchor="middle">A</text>
+</svg>

src/app/layout.tsx

@@ -32,8 +32,9 @@ const pixelFont = Pixelify_Sans({
 export async function generateMetadata(): Promise<Metadata> {
   const appUrl = process.env.APP_URL ?? "http://localhost:3000";
   const hotel = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
-  const favicon = await siteSettings.get("cms_favicon");
-  const icons = favicon ? [{ rel: "icon", url: favicon }, { rel: "shortcut icon", url: favicon }] : [];
+  const customFavicon = await siteSettings.get("cms_favicon");
+  const faviconUrl = customFavicon ?? "/favicon.svg";
+  const icons = [{ rel: "icon", url: faviconUrl }, { rel: "shortcut icon", url: faviconUrl }];
   return {
     title: { default: `${hotel} - Hotel`, template: `%s · ${hotel}` },
     description: `${hotel} — a Habbo retro hotel. Hang out, collect furni and meet friends.`,