diff --git a/src/common/favicon/favicon.component.module.css b/src/common/favicon/favicon.component.module.css
new file mode 100644
index 00000000..3b3ef587
--- /dev/null
+++ b/src/common/favicon/favicon.component.module.css
@@ -0,0 +1,12 @@
+.container {
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: 'pointer';
+  transition: transform 0.2s ease-in-out;
+}
+
+.container:active {
+  transform: scale(0.95);
+}
diff --git a/src/common/favicon/favicon.component.tsx b/src/common/favicon/favicon.component.tsx
new file mode 100644
index 00000000..fc73d6ef
--- /dev/null
+++ b/src/common/favicon/favicon.component.tsx
@@ -0,0 +1,43 @@
+import React, { FC, MouseEventHandler } from 'react';
+import classes from './favicon.component.module.css';
+
+interface Props {
+  icon: React.ReactNode;
+  backgroundColor: string;
+  onDoubleClick?: MouseEventHandler<HTMLImageElement>;
+  size?: string;
+}
+
+export const FaviconComponent: FC<Props> = props => {
+  const { icon, backgroundColor, onDoubleClick, size = '50px' } = props;
+  return (
+    <div
+      className={classes.container}
+      style={{ backgroundColor, width: size, height: size }}
+      onDoubleClick={onDoubleClick}
+    >
+      {icon}
+    </div>
+  );
+};
+
+/* 
+
+
+  USAGE EXAMPLE
+
+  const handleDoubleClick = (event: React.MouseEvent<HTMLImageElement>) => {
+    console.log('Icon double-clicked!', event);
+  };
+
+  {
+    <FaviconComponent
+    icon="❤️"
+    backgroundColor="lightblue"
+    size="50px"
+    onDoubleClick={handleDoubleClick}
+    /> 
+  }
+
+
+*/
diff --git a/src/common/favicon/index.ts b/src/common/favicon/index.ts
new file mode 100644
index 00000000..e1ee8b65
--- /dev/null
+++ b/src/common/favicon/index.ts
@@ -0,0 +1 @@
+export * from './favicon.component';