Add comprehensive favicon and PWA support

assets/images/apple-touch-icon.svg

@@ -0,0 +1,23 @@
+<svg width="180" height="180" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="appleIconGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Apple touch icon background -->
+  <rect width="180" height="180" fill="url(#appleIconGrad)" rx="30"/>
+  
+  <!-- UK Data Services logo -->
+  <text x="90" y="110" font-family="Arial, sans-serif" font-size="48" font-weight="bold" fill="white" text-anchor="middle">UK</text>
+  <text x="90" y="140" font-family="Arial, sans-serif" font-size="16" font-weight="normal" fill="white" text-anchor="middle" opacity="0.9">DATA SERVICES</text>
+  
+  <!-- Data visualization elements -->
+  <rect x="30" y="40" width="120" height="8" fill="white" opacity="0.7" rx="4"/>
+  <rect x="40" y="55" width="100" height="6" fill="white" opacity="0.6" rx="3"/>
+  <rect x="35" y="70" width="110" height="4" fill="white" opacity="0.5" rx="2"/>
+  
+  <!-- Corner accent -->
+  <circle cx="150" cy="45" r="15" fill="white" opacity="0.3"/>
+  <circle cx="45" cy="150" r="12" fill="white" opacity="0.2"/>
+</svg>

assets/images/favicon-16x16.svg

@@ -0,0 +1,12 @@
+<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="faviconGrad16" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Favicon background -->
+  <rect width="16" height="16" fill="url(#faviconGrad16)" rx="3"/>
+  <!-- Simplified UK initials for small size -->
+  <text x="8" y="12" font-family="Arial, sans-serif" font-size="8" font-weight="bold" fill="white" text-anchor="middle">UK</text>
+</svg>

assets/images/favicon-32x32.svg

@@ -0,0 +1,15 @@
+<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="faviconGrad32" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Favicon background -->
+  <rect width="32" height="32" fill="url(#faviconGrad32)" rx="6"/>
+  <!-- UK initials -->
+  <text x="16" y="22" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="white" text-anchor="middle">UK</text>
+  <!-- Data symbol -->
+  <rect x="6" y="6" width="20" height="2" fill="white" opacity="0.8" rx="1"/>
+  <rect x="8" y="9" width="16" height="1" fill="white" opacity="0.6" rx="0.5"/>
+</svg>

browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="assets/images/favicon.svg"/>
+            <TileColor>#667eea</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

index.php

@@ -45,9 +45,17 @@ $twitter_card_image = "https://ukdataservices.co.uk/assets/images/twitter-card.j
     <meta name="twitter:description" content="<?php echo htmlspecialchars($page_description); ?>">
     <meta name="twitter:image" content="<?php echo htmlspecialchars($twitter_card_image); ?>">
     
-    <!-- Favicon -->
+    <!-- Favicon and App Icons -->
-    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
+    <link rel="icon" type="image/svg+xml" href="assets/images/favicon.svg">
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.png">
+    <link rel="icon" type="image/svg+xml" sizes="16x16" href="assets/images/favicon-16x16.svg">
+    <link rel="icon" type="image/svg+xml" sizes="32x32" href="assets/images/favicon-32x32.svg">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/images/apple-touch-icon.svg">
+    <link rel="manifest" href="manifest.json">
+    <meta name="theme-color" content="#764ba2">
+    <meta name="msapplication-TileColor" content="#667eea">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="UK Data Services">
     
     <!-- Google Analytics 4 (GA4) -->
     <!-- TODO: Replace GA_MEASUREMENT_ID with your actual Google Analytics 4 Measurement ID -->

manifest.json

@@ -0,0 +1,43 @@
+{
+  "name": "UK Data Services",
+  "short_name": "UKDS",
+  "description": "Professional web scraping and data analytics services in the UK",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#667eea",
+  "theme_color": "#764ba2",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "assets/images/favicon-16x16.svg",
+      "sizes": "16x16",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "assets/images/favicon-32x32.svg", 
+      "sizes": "32x32",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "assets/images/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    },
+    {
+      "src": "assets/images/apple-touch-icon.svg",
+      "sizes": "180x180",
+      "type": "image/svg+xml",
+      "purpose": "apple-touch-icon"
+    },
+    {
+      "src": "assets/images/ukds-main-logo.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "any maskable"
+    }
+  ],
+  "categories": ["business", "productivity", "utilities"],
+  "lang": "en-GB",
+  "scope": "/",
+  "id": "uk-data-services"
+}