diff --git a/client/src/assets/img/favicon/fav-1.svg b/client/src/assets/img/favicon/fav-1.svg
new file mode 100644
index 0000000..18a35b3
--- /dev/null
+++ b/client/src/assets/img/favicon/fav-1.svg
@@ -0,0 +1,13 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.6499 10.4707L36.2205 21.7959C37.8587 22.8014 37.9651 24.941 36.4308 26.07L19.8603 37.1358C17.9201 38.5687 15 37.326 15 35.0679V12.6794C15 10.53 17.6776 9.25767 19.6499 10.4707Z" fill="url(#paint0_linear_764_558)" stroke="url(#paint1_linear_764_558)" stroke-width="7.67085" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_558" x1="16.5052" y1="11.6349" x2="37.4699" y2="31.8231" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/client/src/assets/img/favicon/fav-2.svg b/client/src/assets/img/favicon/fav-2.svg
new file mode 100644
index 0000000..3b209df
--- /dev/null
+++ b/client/src/assets/img/favicon/fav-2.svg
@@ -0,0 +1,13 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.8909 7.29266L23.1931 14.3337C24.2116 14.9589 24.2778 16.289 23.3239 16.991L13.0217 23.8708C11.8155 24.7616 10 23.989 10 22.5851V8.66585C10 7.32952 11.6647 6.53848 12.8909 7.29266Z" fill="url(#paint0_linear_764_557)" stroke="url(#paint1_linear_764_557)" stroke-width="4.76909" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_557" x1="10.9358" y1="8.01644" x2="23.9699" y2="20.5678" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/client/src/assets/img/favicon/fav.svg b/client/src/assets/img/favicon/fav.svg
new file mode 100644
index 0000000..de765c8
--- /dev/null
+++ b/client/src/assets/img/favicon/fav.svg
@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.44547 3.4592L11.5966 6.97972C12.1058 7.29229 12.1389 7.95738 11.6619 8.30836L6.51086 11.7482C5.90775 12.1937 5 11.8074 5 11.1054V4.14579C5 3.47763 5.83236 3.08211 6.44547 3.4592Z" fill="url(#paint0_linear_764_556)" stroke="url(#paint1_linear_764_556)" stroke-width="2.38454" stroke-miterlimit="10" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_556" x1="5.46789" y1="3.82109" x2="11.9849" y2="10.0968" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8E00FE"/>
+<stop offset="1" stop-color="#6800FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/client/src/index.template.html b/client/src/index.template.html
index f2a4a7f..4b73f8c 100644
--- a/client/src/index.template.html
+++ b/client/src/index.template.html
@@ -9,29 +9,12 @@
       content="user-scalable=yes, initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>"
     />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/ico" href="favicon.ico" />
-    <link
-      rel="icon"
-      type="image/svg"
-      sizes="16x16"
-      href="icons/favicon-16x16.svg"
-    />
-    <link
-      rel="icon"
-      type="image/svg"
-      sizes="32x32"
-      href="icons/favicon-32x32.svg"
-    />
-    <link
-      rel="icon"
-      type="image/svg"
-      sizes="48x48"
-      href="icons/favicon-48x48.svg"
-    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-    <meta name="msapplication-TileColor" content="#00a300" />
-    <meta name="theme-color" content="#119b58" />
+    <meta name="msapplication-TileColor" content="#da532c" />
+    <meta name="theme-color" content="#ffffff" />
   </head>
   <body>
     <!-- DO NOT touch the following DIV -->