diff --git a/src/background/handlers/onActivated.ts b/src/background/handlers/onActivated.ts
index e55c906..21b0038 100644
--- a/src/background/handlers/onActivated.ts
+++ b/src/background/handlers/onActivated.ts
@@ -1,16 +1,31 @@
 import browser from "webextension-polyfill";
 
+const ICON_GRAY_PATH = new URL("../../assets/icon-gray.png", import.meta.url);
+const ICON_PATH = new URL("../../assets/icon.png", import.meta.url);
+
+let activeTabId: number | undefined;
+
 export default async function onActivated() {
-  const icon = await getBrowserActionIcon();
+  await setBrowserActionIcon();
+  browser.tabs.onUpdated.removeListener(setBrowserActionIcon);
+  browser.tabs.onUpdated.addListener(setBrowserActionIcon, {
+    tabId: activeTabId,
+  });
+}
+
+async function setBrowserActionIcon() {
+  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+  const activeTab = tabs[0];
+  if (activeTab) {
+    activeTabId = activeTab.id;
+  }
+  const icon = await getBrowserActionIcon(activeTab);
   browser.browserAction.setIcon(icon);
 }
 
-async function getBrowserActionIcon(): Promise<browser.Action.SetIconDetailsType> {
-  const ICON_GRAY_PATH = new URL("../../assets/icon-gray.png", import.meta.url);
-  const ICON_PATH = new URL("../../assets/icon.png", import.meta.url);
-
-  const tabs = await browser.tabs.query({ active: true, currentWindow: true });
-  const activeTab = tabs[0];
+async function getBrowserActionIcon(
+  activeTab: browser.Tabs.Tab | undefined
+): Promise<browser.Action.SetIconDetailsType> {
   if (!activeTab || !activeTab.url) return { path: ICON_GRAY_PATH.href };
   try {
     const url = new URL(activeTab.url);