diff --git a/index.html b/index.html
index acb2f3c..7cf933e 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,47 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
+
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta name="apple-mobile-web-app-title" content="MyWebSite" />
+    <link rel="manifest" href="/site.webmanifest" />
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    
+    <!-- Primary Meta Tags -->
+    <title>Spritesheet Generator - Create Game Spritesheets Online</title>
+    <meta name="title" content="Spritesheet Generator - Create Game Spritesheets Online">
+    <meta name="description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
+    <meta name="keywords" content="spritesheet generator, sprite sheet maker, game development, pixel art, sprite animation, game assets, 2D game tools">
+    <meta name="author" content="nu11ed">
+    <meta name="robots" content="index, follow">
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://sprite-gen.xvx.sh/">
+    <meta property="og:title" content="Spritesheet Generator - Create Game Spritesheets Online">
+    <meta property="og:description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
+    <meta property="og:image" content="/og-image.png">
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    <meta property="twitter:url" content="https://sprite-gen.xvx.sh/">
+    <meta property="twitter:title" content="Spritesheet Generator - Create Game Spritesheets Online">
+    <meta property="twitter:description" content="Free online tool to create spritesheets for game development. Upload sprites, arrange them, and export as a spritesheet with animation preview.">
+    <meta property="twitter:image" content="/og-image.png">
+
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#0096ff">
+    
     <title>Spritesheet generator</title>
   </head>
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
new file mode 100644
index 0000000..7f7e4b1
Binary files /dev/null and b/public/apple-touch-icon.png differ
diff --git a/public/favicon-96x96.png b/public/favicon-96x96.png
new file mode 100644
index 0000000..40bbdb7
Binary files /dev/null and b/public/favicon-96x96.png differ
diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcf..3be670c 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..a473f2d
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="58" height="58"><svg version="1.1" id="SvgjsSvg1026" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 58 58" xml:space="preserve">
+<path style="fill:none;stroke:#38454F;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" d="M26,25V13.5
+	c0-2.475,2.025-4.5,4.5-4.5h0c2.475,0,4.5,2.025,4.5,4.5V17c0,2.2,1.8,4,4,4h0c2.2,0,4-1.8,4-4V1"></path>
+<rect x="1" y="25" style="fill:#38454F;" width="56" height="33"></rect>
+<polygon style="fill:#CBD4D8;" points="52,53 6,53 6,30 27,30 27,38 52,38 "></polygon>
+<polygon style="fill:#546A79;" points="21,40 18,40 18,37 14,37 14,40 11,40 11,44 14,44 14,47 18,47 18,44 21,44 "></polygon>
+<circle style="fill:#DD352E;" cx="45.5" cy="45.5" r="2.5"></circle>
+<circle style="fill:#DD352E;" cx="36.5" cy="45.5" r="2.5"></circle>
+<line style="fill:none;stroke:#AFB6BB;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" x1="25" y1="46" x2="30" y2="46"></line>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+@media (prefers-color-scheme: dark) { :root { filter: none; } }
+</style></svg>
\ No newline at end of file
diff --git a/public/site.webmanifest b/public/site.webmanifest
new file mode 100644
index 0000000..ccf313a
--- /dev/null
+++ b/public/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "MyWebSite",
+  "short_name": "MySite",
+  "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": "#ffffff",
+  "display": "standalone"
+}
\ No newline at end of file
diff --git a/public/web-app-manifest-192x192.png b/public/web-app-manifest-192x192.png
new file mode 100644
index 0000000..feeb30e
Binary files /dev/null and b/public/web-app-manifest-192x192.png differ
diff --git a/public/web-app-manifest-512x512.png b/public/web-app-manifest-512x512.png
new file mode 100644
index 0000000..a47df42
Binary files /dev/null and b/public/web-app-manifest-512x512.png differ
