Improve professional appearance: logo, favicon, and remove emoji icons

1. Added original favicon
   - Copied favicon.svg from original frontend
   - Added favicon reference to layout metadata
   - Professional icon with brand colors

2. Updated logo in navigation
   - Replaced emoji with proper SVG logo from original design
   - Uses circular target design with crosshairs
   - Matches brand identity with coral accent color

3. Removed emoji icons throughout app for professional look
   - Removed 📍 (location pin) from school locations
   - Removed 🏫 (school building) from school types
   - Removed 🔢 from URN labels and section headings
   - Kept meaningful symbols (✓, +) in buttons only
   - Updated map popup button color to brand coral (#e07256)

Components updated:
- Navigation: Professional SVG logo
- HomeView: Clean location banner
- SchoolDetailView: No decorative emojis in metadata
- ComparisonView: Text-only school information
- SchoolSearchModal: Clean school listings
- LeafletMapInner: Professional map popups

Result: More polished, professional appearance suitable for
educational data platform

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

nextjs-app/app/layout.tsx

@@ -28,6 +28,11 @@ export const metadata: Metadata = {
   keywords: 'school comparison, KS2 results, primary school performance, England schools, SATs results',
   authors: [{ name: 'SchoolCompare' }],
   manifest: '/manifest.json',
+  icons: {
+    icon: '/favicon.svg',
+    shortcut: '/favicon.svg',
+    apple: '/favicon.svg',
+  },
   openGraph: {
     type: 'website',
     title: 'SchoolCompare | Compare Primary School Performance',

nextjs-app/components/ComparisonView.tsx

@@ -158,10 +158,10 @@ export function ComparisonView({
               </h3>
               <div className={styles.schoolMeta}>
                 {school.local_authority && (
-                  <span className={styles.metaItem}>📍 {school.local_authority}</span>
+                  <span className={styles.metaItem}>{school.local_authority}</span>
                 )}
                 {school.school_type && (
-                  <span className={styles.metaItem}>🏫 {school.school_type}</span>
+                  <span className={styles.metaItem}>{school.school_type}</span>
                 )}
               </div>
 

nextjs-app/components/HomeView.tsx

@@ -44,7 +44,6 @@ export function HomeView({ initialSchools, filters }: HomeViewProps) {
       {/* Location Info Banner */}
       {isLocationSearch && initialSchools.location_info && (
         <div className={styles.locationBanner}>
-          <span className={styles.locationIcon}>📍</span>
           <span>
             Showing schools within {(initialSchools.location_info.radius / 1.60934).toFixed(1)} miles of{' '}
             <strong>{initialSchools.location_info.postcode}</strong>

nextjs-app/components/LeafletMapInner.tsx

@@ -58,9 +58,9 @@ export default function LeafletMapInner({ schools, center, zoom, onMarkerClick }
         const popupContent = `
           <div style="min-width: 200px;">
             <strong style="font-size: 14px; display: block; margin-bottom: 8px;">${school.school_name}</strong>
-            ${school.local_authority ? `<div style="font-size: 12px; color: #666; margin-bottom: 4px;">📍 ${school.local_authority}</div>` : ''}
+            ${school.local_authority ? `<div style="font-size: 12px; color: #666; margin-bottom: 4px;">${school.local_authority}</div>` : ''}
-            ${school.school_type ? `<div style="font-size: 12px; color: #666; margin-bottom: 8px;">🏫 ${school.school_type}</div>` : ''}
+            ${school.school_type ? `<div style="font-size: 12px; color: #666; margin-bottom: 8px;">${school.school_type}</div>` : ''}
-            <a href="/school/${school.urn}" style="display: inline-block; margin-top: 8px; padding: 6px 12px; background: #3b82f6; color: white; text-decoration: none; border-radius: 4px; font-size: 12px;">View Details</a>
+            <a href="/school/${school.urn}" style="display: inline-block; margin-top: 8px; padding: 6px 12px; background: #e07256; color: white; text-decoration: none; border-radius: 4px; font-size: 12px;">View Details</a>
           </div>
         `;
 

nextjs-app/components/Navigation.tsx

@@ -25,7 +25,13 @@ export function Navigation() {
     <header className={styles.header}>
       <div className={styles.container}>
         <Link href="/" className={styles.logo}>
-          <span className={styles.logoIcon}>🏫</span>
+          <div className={styles.logoIcon}>
+            <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="20" cy="20" r="18" stroke="currentColor" strokeWidth="2"/>
+              <path d="M20 6L20 34M8 14L32 14M6 20L34 20M8 26L32 26" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+              <circle cx="20" cy="20" r="3" fill="currentColor"/>
+            </svg>
+          </div>
           <span className={styles.logoText}>SchoolCompare</span>
         </Link>
 

nextjs-app/components/SchoolDetailView.tsx

@@ -44,16 +44,16 @@ export function SchoolDetailView({ schoolInfo, yearlyData, absenceData }: School
             <div className={styles.meta}>
               {schoolInfo.local_authority && (
                 <span className={styles.metaItem}>
-                  📍 {schoolInfo.local_authority}
+                  {schoolInfo.local_authority}
                 </span>
               )}
               {schoolInfo.school_type && (
                 <span className={styles.metaItem}>
-                  🏫 {schoolInfo.school_type}
+                  {schoolInfo.school_type}
                 </span>
               )}
               <span className={styles.metaItem}>
-                🔢 URN: {schoolInfo.urn}
+                URN: {schoolInfo.urn}
               </span>
             </div>
             {schoolInfo.address && (
@@ -216,7 +216,7 @@ export function SchoolDetailView({ schoolInfo, yearlyData, absenceData }: School
 
           {/* Maths Metrics */}
           <div className={styles.metricGroup}>
-            <h3 className={styles.metricGroupTitle}>🔢 Mathematics</h3>
+            <h3 className={styles.metricGroupTitle}>Mathematics</h3>
             <div className={styles.metricTable}>
               {latestResults.maths_expected_pct !== null && (
                 <div className={styles.metricRow}>

nextjs-app/components/SchoolSearchModal.tsx

@@ -112,10 +112,10 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                   <div className={styles.schoolName}>{school.school_name}</div>
                   <div className={styles.schoolMeta}>
                     {school.local_authority && (
-                      <span>📍 {school.local_authority}</span>
+                      <span>{school.local_authority}</span>
                     )}
                     {school.school_type && (
-                      <span>🏫 {school.school_type}</span>
+                      <span>{school.school_type}</span>
                     )}
                   </div>
                 </div>

nextjs-app/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="40" height="40" rx="8" fill="#1a1612"/>
+  <circle cx="20" cy="20" r="14" stroke="#e07256" stroke-width="2"/>
+  <path d="M20 8L20 32M12 14L28 14M10 20L30 20M12 26L28 26" stroke="#e07256" stroke-width="1.5" stroke-linecap="round"/>
+  <circle cx="20" cy="20" r="3" fill="#e07256"/>
+</svg>