diff --git a/.gitignore b/.gitignore
index c735a6ca2..2cbb98d2f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,4 @@ yarn-error.log*
 .ipynb_checkpoints
 
 .yarn
+.vscode/
diff --git a/public/favicon.ico b/public/favicon.ico
index a1536e3ef..127feadc8 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 000000000..f83edcf2e
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,27 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="600" height="600"><svg version="1.1" id="SvgjsSvg1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 600 600" style="enable-background:new 0 0 600 600;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#216C89;}
+	.st1{fill:#4993AA;}
+	.st2{fill:#0F4565;}
+	.st3{fill:#6BE8E8;}
+	.st4{fill:#9DEEF4;}
+	.st5{fill:#4ACFDD;}
+	.st6{fill:#E38017;}
+	.st7{fill:#16AFB5;}
+</style>
+<g>
+	<g>
+		<polygon class="st0" points="266.62,546.18 356.1,454.54 356.1,271.27 266.62,362.9 		"></polygon>
+		<polygon class="st1" points="356.1,271.45 114.48,271.45 25,362.9 266.62,362.9 		"></polygon>
+		<rect x="25" y="362.9" class="st2" width="241.62" height="183.27"></rect>
+	</g>
+	<g>
+		<polygon class="st3" points="266.62,328.73 356.1,237.1 356.1,53.82 266.62,145.46 		"></polygon>
+		<polygon class="st4" points="356.1,54 114.48,54 25,145.46 266.62,145.46 		"></polygon>
+		<rect x="25" y="145.46" class="st5" width="241.62" height="183.27"></rect>
+	</g>
+	<polygon class="st6" points="467.47,452.33 374.48,546.18 374.48,362.9 467.47,269.05 	"></polygon>
+	<polygon class="st7" points="575,452.33 482.01,546.18 482.01,362.9 575,269.05 	"></polygon>
+</g>
+</svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
+</style></svg>
diff --git a/src/components/layout.js b/src/components/layout.js
index 08e13f77a..4cf78c05f 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -38,6 +38,8 @@ export const Layout = ({
           sizes='96x96'
           href='/Xarray-assets/Icon/Xarray_Icon_final.svg'
         />
+        <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
+        <link rel='icon' type='image/png' href='/favicon.png' />
 
         <title>{title}</title>
       </Head>