docs: add favicon and mobile styling (#3650)

# What does this PR do?
* Adds favicon
* Replaces old llama-stack theme image 
* Adds some mobile styling

## Test Plan
* Manual testing

docs/docusaurus.config.ts

@@ -15,6 +15,50 @@ const config: Config = {
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",
 
+  // Enhanced favicon and meta configuration
+  headTags: [
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/img/favicon-32x32.png',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/img/favicon-16x16.png',
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/img/llama-stack-logo.png',
+      },
+    },
+    {
+      tagName: 'meta',
+      attributes: {
+        name: 'theme-color',
+        content: '#7C3AED', // Purple color from your logo
+      },
+    },
+    {
+      tagName: 'link',
+      attributes: {
+        rel: 'manifest',
+        href: '/site.webmanifest',
+      },
+    },
+  ],
+
   // GitHub pages deployment config.
   organizationName: 'reluctantfuturist',
   projectName: 'llama-stack',

docs/static/site.webmanifest

@@ -0,0 +1,36 @@
+{
+  "name": "Llama Stack",
+  "short_name": "Llama Stack",
+  "description": "The open-source framework for building generative AI applications",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#7C3AED",
+  "background_color": "#ffffff",
+  "icons": [
+    {
+      "src": "/img/favicon-16x16.png",
+      "sizes": "16x16",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/favicon-32x32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/favicon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/favicon-64x64.png",
+      "sizes": "64x64",
+      "type": "image/png"
+    },
+    {
+      "src": "/img/llama-stack-logo.png",
+      "sizes": "200x200",
+      "type": "image/png"
+    }
+  ]
+}