Add favicons and web manifest for PWA support

Added multiple favicon formats, apple-touch icon, and a web manifest to the public directory. Updated astro.config.ts to include relevant <link> tags for browser and PWA support. Improved favicon.svg for better compatibility.

Author: kylemclaren

astro.config.ts

@@ -83,6 +83,27 @@ export default defineConfig({
         },
       ],
       head: [
+        // Favicons for Google Search and browsers
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/png', sizes: '96x96', href: '/favicon-96x96.png' },
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'apple-touch-icon', sizes: '180x180', href: '/apple-touch-icon.png' },
+        },
+        {
+          tag: 'link',
+          attrs: { rel: 'manifest', href: '/site.webmanifest' },
+        },
         // Google Search Console verification
         {
           tag: 'meta',

public/apple-touch-icon.png

@@ -0,0 +1,21 @@
+{
+  "name": "Sprites",
+  "short_name": "Sprites",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#100017",
+  "display": "standalone"
+}