diff --git a/pages/_document.tsx b/pages/_document.tsx
index 6343080..d2dd786 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -5,8 +5,10 @@ class MyDocument extends Document {
         return (
             <Html>
                 <Head>
-                    <link href="/favicon.png" rel="icon" />
                     <meta charSet="utf-8" />
+                    <link rel="icon" href="/favicon.png" type="image/png" />
+                    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+                    <link rel="mask-icon" href="/mask-favicon.svg" color="#1975FF" />
 
                     <meta content="A collection of popular layouts and patterns made with CSS" name="description" />
                     <meta
@@ -21,7 +23,6 @@ class MyDocument extends Document {
                         name="twitter:description"
                     />
                     <meta content="A collection of popular layouts and patterns made with CSS" name="twitter:title" />
-                    <meta content="/assets/logo.png" name="twitter:image" />
 
                     <meta content="A collection of popular layouts and patterns made with CSS" property="og:title" />
                     <meta
@@ -30,10 +31,8 @@ class MyDocument extends Document {
                     />
                     <meta content="article" property="og:type" />
                     <meta content="https://csslayout.io" property="og:url" />
-                    <meta content="/assets/logo.png" property="og:image" />
                     <meta content="CSS Layout" property="og:site_name" />
 
-                    <link rel="icon" href="/assets/favicon.png" />
                     <link rel="preconnect" href="https://fonts.googleapis.com" />
                     <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
                     <link
diff --git a/public/assets/favicon.png b/public/assets/favicon.png
deleted file mode 100644
index bca3a6f..0000000
Binary files a/public/assets/favicon.png and /dev/null differ
diff --git a/public/assets/logo.png b/public/assets/logo.png
deleted file mode 100644
index 5c3c3a8..0000000
Binary files a/public/assets/logo.png and /dev/null differ
diff --git a/public/assets/logo.svg b/public/assets/logo.svg
deleted file mode 100644
index 674b71f..0000000
--- a/public/assets/logo.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="64" height="64" viewBox="0 0 1024 1024">
-    <g transform="translate(512 512) scale(8.24 8.24)">
-        <line x1="-46" y1="0" x2="46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 -32.49)"/>
-        <line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(46 0)"/>
-        <line x1="46" y1="0" x2="-46" y2="0" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 32.49)"/>
-        <line x1="0" y1="32.489999999999995" x2="0" y2="-32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 2; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-46 0)"/>
-        <line x1="0" y1="-32.489999999999995" x2="0" y2="32.489999999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(0 0)"/>
-        <line x1="-23" y1="0" x2="23" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 0)"/>
-        <line x1="0" y1="-16.244999999999997" x2="0" y2="16.244999999999997" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-23 16.245)"/>
-        <line x1="11.5" y1="0" x2="-11.5" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 16.245)"/>
-        <line x1="0" y1="-8.122499999999995" x2="0" y2="8.122499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-34.5 24.3675)"/>
-        <line x1="5.75" y1="0" x2="-5.75" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 24.367)"/>
-        <line x1="0" y1="-4.061499999999995" x2="0" y2="4.061499999999995" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-40.25 28.4285)"/>
-        <line x1="2.875" y1="0" x2="-2.875" y2="0" style="stroke: rgb(30,29,110); stroke-width: 0.7087; stroke-dasharray: none; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; fill: rgb(30,29,110); fill-rule: nonzero; opacity: 1;" transform="translate(-43.125 28.429)"/>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/public/favicon.png b/public/favicon.png
new file mode 100644
index 0000000..14f67a6
Binary files /dev/null and b/public/favicon.png differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..a3498e6
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4 11.5518V12.9531H11.6836V9.72656H9.85156L9.79688 11.1143H7.43164V4.62695L8.68945 4.4082V3H7.43164H5.03223H4V4.4082L5.03223 4.62695V11.333L4 11.5518Z" fill="#1975FF"/>
+</svg>
diff --git a/public/mask-favicon.svg b/public/mask-favicon.svg
new file mode 100644
index 0000000..6e36b53
--- /dev/null
+++ b/public/mask-favicon.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM4 11.5518V12.9531H11.6836V9.72656H9.85156L9.79688 11.1143H7.43164V4.62695L8.68945 4.4082V3H7.43164H5.03223H4V4.4082L5.03223 4.62695V11.333L4 11.5518Z" fill="black"/>
+</svg>
