diff --git a/web/components/manifold-love-logo.tsx b/web/components/manifold-love-logo.tsx
index 2ff93cc7..985f6bf8 100644
--- a/web/components/manifold-love-logo.tsx
+++ b/web/components/manifold-love-logo.tsx
@@ -3,6 +3,7 @@ import LoveLogo from '../public/manifold_love_logo.svg'
 import clsx from 'clsx'
 import { ENV } from 'common/envs/constants'
 import { Row } from 'web/components/layout/row'
+import FavIcon from "web/public/FavIcon";
 
 export default function ManifoldLoveLogo(props: {
   noLink?: boolean
@@ -11,16 +12,9 @@ export default function ManifoldLoveLogo(props: {
   const { noLink, className } = props
   const inner = (
     <>
-      <LoveLogo
-        className="h-10 w-10 shrink-0 stroke-pink-700 transition-transform dark:stroke-pink-300"
-        aria-hidden
-      />
+      <FavIcon className="dark:invert"/>
       <div className={clsx('my-auto text-xl font-thin')}>
-        {ENV == 'DEV' ? 'devifold' : 'manifold'}
-        <span className="mx-[1px]">.</span>
-        <span className="font-semibold text-pink-700 dark:text-pink-300">
-          love
-        </span>
+        {ENV == 'DEV' ? 'Compass' : 'Compass'}
       </div>
     </>
   )
diff --git a/web/public/FavIcon.tsx b/web/public/FavIcon.tsx
new file mode 100644
index 00000000..dfcfaf97
--- /dev/null
+++ b/web/public/FavIcon.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import Image from "next/image";
+
+type FavIconProps = React.SVGProps<SVGSVGElement>;
+
+const FavIcon: React.FC<FavIconProps> = ({ className }) => (
+  <Image src="/favicon.ico" alt="Compass logo" width={500} height={500} className={"w-12 h-12 " + className}/>
+);
+
+export default FavIcon;
+
diff --git a/web/public/favicon.ico b/web/public/favicon.ico
index f9106fa0..21a0a4b1 100644
Binary files a/web/public/favicon.ico and b/web/public/favicon.ico differ