diff --git a/src/app.html b/src/app.html
index 9ad39ec3..4edda55b 100644
--- a/src/app.html
+++ b/src/app.html
@@ -11,7 +11,9 @@
 		<meta
 			name="description"
 			content="Simplify documentation and avoid heavy tools. Open source Visio Alternative. Commonly used for explaining your code! Mermaid is a simple markdown-like script language for generating charts from text via javascript." />
-		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.svg" />
+		<link rel="mask-icon" href="%sveltekit.assets%/favicon.svg" color="#000000" />
+		<meta name="theme-color" content="#6366F1" />
 		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
 		<link
 			rel="stylesheet"
@@ -28,8 +30,8 @@
 		<script>
 			var require = {
 				paths: {
-					vs: "https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs",
-				},
+					vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.34.0/min/vs'
+				}
 			};
 		</script>
 		<script
diff --git a/static/favicon.ico b/static/favicon.ico
new file mode 100644
index 00000000..7873127f
Binary files /dev/null and b/static/favicon.ico differ
diff --git a/static/favicon.png b/static/favicon.png
index 1c2e38b9..3d094e97 100644
Binary files a/static/favicon.png and b/static/favicon.png differ
diff --git a/static/favicon.svg b/static/favicon.svg
new file mode 100644
index 00000000..993c56b9
--- /dev/null
+++ b/static/favicon.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 491 491" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M490.16,84.61C490.16,37.912 452.248,0 405.55,0L84.61,0C37.912,0 0,37.912 0,84.61L0,405.55C0,452.248 37.912,490.16 84.61,490.16L405.55,490.16C452.248,490.16 490.16,452.248 490.16,405.55L490.16,84.61Z" style="fill:rgb(255,54,112);"/>
+    <path d="M407.48,111.18C335.587,108.103 269.573,152.338 245.08,220C220.587,152.338 154.573,108.103 82.68,111.18C80.285,168.229 107.577,222.632 154.74,254.82C178.908,271.419 193.35,298.951 193.27,328.27L193.27,379.13L296.9,379.13L296.9,328.27C296.816,298.953 311.255,271.42 335.42,254.82C382.596,222.644 409.892,168.233 407.48,111.18Z" style="fill:white;fill-rule:nonzero;"/>
+</svg>
diff --git a/static/icon-192.png b/static/icon-192.png
deleted file mode 100644
index 0bfa1a5c..00000000
Binary files a/static/icon-192.png and /dev/null differ
diff --git a/static/icon-512.png b/static/icon-512.png
deleted file mode 100644
index 8e89b9f9..00000000
Binary files a/static/icon-512.png and /dev/null differ
diff --git a/static/manifest.json b/static/manifest.json
index ba584bf8..d57636a2 100644
--- a/static/manifest.json
+++ b/static/manifest.json
@@ -3,12 +3,7 @@
 	"name": "Mermaid Live Editor",
 	"icons": [
 		{
-			"src": "/icon-192.png",
-			"type": "image/png",
-			"sizes": "192x192"
-		},
-		{
-			"src": "/icon-512.png",
+			"src": "/favicon.png",
 			"type": "image/png",
 			"sizes": "512x512"
 		}