From 83a45ae7062749daa31bf952b51bd6e61ff541ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Tue, 17 Aug 2021 22:50:49 +0200
Subject: [PATCH] Fixing favicon changes on other browsers (#1017)

---
 mattermost-plugin/webapp/src/index.tsx | 14 ++++++++++----
 webapp/src/utils.ts                    | 10 +++++++---
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/mattermost-plugin/webapp/src/index.tsx b/mattermost-plugin/webapp/src/index.tsx
index a82877fe3..02980b7ed 100644
--- a/mattermost-plugin/webapp/src/index.tsx
+++ b/mattermost-plugin/webapp/src/index.tsx
@@ -49,13 +49,19 @@ const MainApp = () => {
     }, [])
 
     useEffect(() => {
-        const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement
+        const oldLink = document.querySelector("link[rel*='icon']") as HTMLLinkElement
+        if (!oldLink) {
+            return () => null
+        }
+
         const restoreData = {
-            type: link.type,
-            rel: link.rel,
-            href: link.href,
+            type: oldLink.type,
+            rel: oldLink.rel,
+            href: oldLink.href,
         }
         return () => {
+            document.querySelectorAll("link[rel*='icon']").forEach((n) => n.remove())
+            const link = document.createElement('link') as HTMLLinkElement
             link.type = restoreData.type
             link.rel = restoreData.rel
             link.href = restoreData.href
diff --git a/webapp/src/utils.ts b/webapp/src/utils.ts
index 2df628b68..a5764e113 100644
--- a/webapp/src/utils.ts
+++ b/webapp/src/utils.ts
@@ -241,11 +241,15 @@ class Utils {
     // favicon
 
     static setFavicon(icon?: string): void {
-        const href = icon ? `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${icon}</text></svg>` : ''
-        const link = (document.querySelector("link[rel*='icon']") || document.createElement('link')) as HTMLLinkElement
+        if (!icon) {
+            document.querySelector("link[rel*='icon']")?.remove()
+            return
+        }
+        const link = document.createElement('link') as HTMLLinkElement
         link.type = 'image/x-icon'
         link.rel = 'shortcut icon'
-        link.href = href
+        link.href = `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">${icon}</text></svg>`
+        document.querySelectorAll("link[rel*='icon']").forEach((n) => n.remove())
         document.getElementsByTagName('head')[0].appendChild(link)
     }