logo.svg in header/footer; outlined favicon + full icon set

apps/web/app/layout.tsx

@@ -38,9 +38,16 @@ export const metadata: Metadata = {
     description: "Find and share the best coupon codes and deals, updated daily by the community.",
     images: [`${BASE}/opengraph-image`],
   },
+  // The mark as outlines (favicon.svg), PNGs for browsers that want them, and
+  // the iOS home-screen icon. app/favicon.ico is the Next convention for /favicon.ico.
   icons: {
-    icon: "/favicon.svg",
+    icon: [
+      { url: "/favicon.svg", type: "image/svg+xml" },
+      { url: "/favicon-32.png", sizes: "32x32", type: "image/png" },
+      { url: "/favicon-16.png", sizes: "16x16", type: "image/png" },
+    ],
     shortcut: "/favicon.svg",
+    apple: [{ url: "/apple-touch-icon.png", sizes: "180x180", type: "image/png" }],
   },
   robots: { index: true, follow: true },
 };

apps/web/app/manifest.ts

@@ -9,9 +9,14 @@ export default function manifest(): MetadataRoute.Manifest {
     display: 'standalone',
     background_color: '#f9fafb',
     theme_color: '#f97316',
+    // Generated with cli-tools `favicon` from public/favicon.svg. The maskable
+    // pair is a separate full-bleed artwork with the mark inside the centre 80%,
+    // so an Android circle mask never clips it.
     icons: [
-      { src: '/icon-192.png', sizes: '192x192', type: 'image/png' },
-      { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
+      { src: '/icon-192.png', sizes: '192x192', type: 'image/png', purpose: 'any' },
+      { src: '/icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any' },
+      { src: '/maskable-192.png', sizes: '192x192', type: 'image/png', purpose: 'maskable' },
+      { src: '/maskable-512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' },
     ],
   };
 }

apps/web/components/Footer.tsx

@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import Link from 'next/link';
 
 export default function Footer() {
@@ -6,8 +7,8 @@ export default function Footer() {
       <div className="max-w-7xl mx-auto px-4 py-14">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-10 mb-12">
           <div className="col-span-2 md:col-span-1">
-            <Link href="/" className="text-xl font-black text-orange-500 tracking-tight">
-              c0upons
+            <Link href="/" className="inline-block">
+              <Image src="/logo.svg" alt="c0upons" width={104} height={22} unoptimized className="h-[22px] w-auto" />
             </Link>
             <p className="mt-3 text-sm leading-relaxed">
               Community-powered coupon codes and deals. Save more with codes shared by real people.

apps/web/components/Header.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import SearchBar from './SearchBar';
@@ -12,7 +13,7 @@ export default function Header() {
     <header className="bg-white border-b border-gray-200 sticky top-0 z-50 shadow-sm">
       <div className="max-w-7xl mx-auto px-4 h-14 flex items-center gap-4">
         <Link href="/" className="flex items-center gap-2 shrink-0">
-          <span className="text-xl font-black text-orange-500 tracking-tight">c0upons</span>
+          <Image src="/logo.svg" alt="c0upons" width={104} height={22} priority unoptimized className="h-[22px] w-auto" />
         </Link>
 
         <div className="flex-1 hidden sm:block">