favicon

app/layout.tsx

@@ -5,6 +5,17 @@ export const metadata: Metadata = {
   title: "Business Email Hosting Corpus Christi | Bay Area Email Services",
   description:
     "Professional domain email hosting for Corpus Christi businesses. 25 GB mailboxes, Outlook and iPhone setup, SPF/DKIM/DMARC, migration, and local support.",
+  icons: {
+    icon: [
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/favicon.ico" },
+      { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-48x48.png", sizes: "48x48", type: "image/png" },
+    ],
+    shortcut: "/favicon.ico",
+    apple: { url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" },
+  },
 };
 
 export default function RootLayout({

app/manifest.ts

@@ -0,0 +1,16 @@
+import type { MetadataRoute } from "next";
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: "Bay Area Email Services",
+    short_name: "Bay Area Email",
+    start_url: "/",
+    display: "standalone",
+    background_color: "#05070d",
+    theme_color: "#000080",
+    icons: [
+      { src: "/icon-192.png", sizes: "192x192", type: "image/png" },
+      { src: "/icon-512.png", sizes: "512x512", type: "image/png" },
+    ],
+  };
+}

public/favicon.svg

@@ -0,0 +1,31 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Bay Area Email Services favicon.
+       Back shape: original navy bracket/arrow (kept for brand recognition).
+       Front shape: blue rounded envelope with flap (the "mail" addition). -->
+
+  <!-- BACK bracket: navy, top-right offset (mirrors original logo) -->
+  <path d="M150 84
+           h138
+           a24 24 0 0 1 24 24
+           v138
+           a24 24 0 0 1 -24 24
+           h-18
+           v-126
+           a24 24 0 0 0 -24 -24
+           h-96
+           z"
+        fill="#000080"/>
+
+  <!-- FRONT envelope: blue, bottom-left offset -->
+  <!-- Envelope body -->
+  <rect x="36" y="138" width="216" height="168" rx="34" fill="#0000FF"/>
+  <!-- Envelope flap: inverted V cut, drawn as a darker overlay using the navy to read as a fold -->
+  <path d="M58 168
+           L144 232
+           L230 168"
+        fill="none"
+        stroke="#FFFFFF"
+        stroke-width="22"
+        stroke-linecap="round"
+        stroke-linejoin="round"/>
+</svg>