feat: add Neo-Brutalist SVG favicon with </E> design

Codestz · claude · Codestz · commit e205516974ea · 2026-02-09T10:10:38.000-05:00
Created a clean SVG favicon inspired by Vercel's style featuring "&lt;/E&gt;"
code brackets. The design uses Neo-Brutalist styling with purple (#7C3AED)
background, black borders, and white text.

Design features:
- Simple, recognizable at all sizes
- Neo-Brutalist aesthetic (thick borders, bold colors)
- Code-themed with &lt;/E&gt; brackets
- SVG format for perfect scaling

Co-Authored-By: Claude Sonnet 4.5 &lt;noreply@anthropic.com&gt;
diff --git a/public/favicon.svg b/public/favicon.svg
@@ -0,0 +1,21 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background -->
+  <rect width="64" height="64" fill="white"/>
+
+  <!-- Border -->
+  <rect x="2" y="2" width="60" height="60" stroke="black" stroke-width="3" fill="none"/>
+
+  <!-- Shadow effect -->
+  <rect x="5" y="5" width="54" height="54" fill="#7C3AED"/>
+
+  <!-- Text: </E> -->
+  <text
+    x="32"
+    y="42"
+    font-family="monospace"
+    font-size="22"
+    font-weight="700"
+    fill="white"
+    text-anchor="middle"
+  >&lt;/E&gt;</text>
+</svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,29 +1,32 @@
-import type { Metadata } from "next";
-import { Syne, Space_Mono } from "next/font/google";
-import { ThemeProvider } from "@/components/providers";
-import { Header, Footer } from "@/components/layout";
-import { APP_CONFIG } from "@/lib/constants";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Syne, Space_Mono } from 'next/font/google';
+import { ThemeProvider } from '@/components/providers';
+import { Header, Footer } from '@/components/layout';
+import { APP_CONFIG } from '@/lib/constants';
+import './globals.css';
 
 // Syne for headings (bold)
 const syne = Syne({
-  subsets: ["latin"],
-  display: "swap",
-  weight: ["700", "800"],
-  variable: "--font-syne",
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['700', '800'],
+  variable: '--font-syne',
 });
 
 // Space Mono for body (monospace)
 const spaceMono = Space_Mono({
-  subsets: ["latin"],
-  display: "swap",
-  weight: ["400", "700"],
-  variable: "--font-space-mono",
+  subsets: ['latin'],
+  display: 'swap',
+  weight: ['400', '700'],
+  variable: '--font-space-mono',
 });
 
 export const metadata: Metadata = {
   title: APP_CONFIG.title,
   description: APP_CONFIG.description,
+  icons: {
+    icon: [{ url: '/favicon.svg', type: 'image/svg+xml' }],
+  },
 };
 
 export default function RootLayout({
@@ -36,9 +39,7 @@ export default function RootLayout({
       <body className={`${spaceMono.variable} ${syne.variable} font-mono grid-bg min-h-screen`}>
         <ThemeProvider>
           <Header />
-          <main className="min-h-[calc(100vh-200px)]">
-            {children}
-          </main>
+          <main className="min-h-[calc(100vh-200px)]">{children}</main>
           <Footer />
         </ThemeProvider>
       </body>
