diff --git a/frontend/index.html b/frontend/index.html
index 2a7fa0e..39cfccc 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,11 +2,7 @@
-
+
diff --git a/frontend/public/favicon/coding.png b/frontend/public/favicon/coding.png
new file mode 100644
index 0000000..71a6a0b
Binary files /dev/null and b/frontend/public/favicon/coding.png differ
diff --git a/frontend/public/favicon/main.png b/frontend/public/favicon/main.png
new file mode 100644
index 0000000..4a32069
Binary files /dev/null and b/frontend/public/favicon/main.png differ
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b9b528b..192720b 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -38,6 +38,7 @@ import { Stack } from "./lib/stacks";
import { CodeGenerationModel } from "./lib/models";
import ModelSettingsSection from "./components/ModelSettingsSection";
import { extractHtml } from "./components/preview/extractHtml";
+import useBrowserTabIndicator from "./hooks/useBrowserTabIndicator";
const IS_OPENAI_DOWN = false;
@@ -83,6 +84,9 @@ function App() {
const wsRef = useRef(null);
+ // Indicate coding state using the browser tab's favicon and title
+ useBrowserTabIndicator(appState === AppState.CODING);
+
// When the user already has the settings in local storage, newly added keys
// do not get added to the settings so if it's falsy, we populate it with the default
// value
diff --git a/frontend/src/hooks/useBrowserTabIndicator.ts b/frontend/src/hooks/useBrowserTabIndicator.ts
new file mode 100644
index 0000000..aa8cadd
--- /dev/null
+++ b/frontend/src/hooks/useBrowserTabIndicator.ts
@@ -0,0 +1,29 @@
+import { useEffect } from "react";
+
+const CODING_SETTINGS = {
+ title: "Coding...",
+ favicon: "/favicon/coding.png",
+};
+const DEFAULT_SETTINGS = {
+ title: "Screenshot to Code",
+ favicon: "/favicon/main.png",
+};
+
+const useBrowserTabIndicator = (isCoding: boolean) => {
+ useEffect(() => {
+ const settings = isCoding ? CODING_SETTINGS : DEFAULT_SETTINGS;
+
+ // Set favicon
+ const faviconEl = document.querySelector(
+ "link[rel='icon']"
+ ) as HTMLLinkElement | null;
+ if (faviconEl) {
+ faviconEl.href = settings.favicon;
+ }
+
+ // Set title
+ document.title = settings.title;
+ }, [isCoding]);
+};
+
+export default useBrowserTabIndicator;