From a39ee6990199724d80dd39bd5742b1ad158ccd8d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Jun 2021 12:47:54 +0300
Subject: [PATCH] handle multiple favicons (different sizes)

---
 .../favicon_service/favicon_service.js        | 69 ++++++++++---------
 1 file changed, 37 insertions(+), 32 deletions(-)

diff --git a/src/services/favicon_service/favicon_service.js b/src/services/favicon_service/favicon_service.js
index e78aa2ae..7e19629d 100644
--- a/src/services/favicon_service/favicon_service.js
+++ b/src/services/favicon_service/favicon_service.js
@@ -1,53 +1,58 @@
-import { find } from 'lodash'
-
 const createFaviconService = () => {
-  let favimg, favcanvas, favcontext, favicon
+  const favicons = []
   const faviconWidth = 128
   const faviconHeight = 128
   const badgeRadius = 32
 
   const initFaviconService = () => {
-    const nodes = document.getElementsByTagName('link')
-    favicon = find(nodes, node => node.rel === 'icon')
-    if (favicon) {
-      favcanvas = document.createElement('canvas')
-      favcanvas.width = faviconWidth
-      favcanvas.height = faviconHeight
-      favimg = new Image()
-      favimg.crossOrigin = 'anonymous'
-      favimg.src = favicon.href
-      favcontext = favcanvas.getContext('2d')
-    }
+    const nodes = document.querySelectorAll('link[rel="icon"]')
+    nodes.forEach(favicon => {
+      if (favicon) {
+        const favcanvas = document.createElement('canvas')
+        favcanvas.width = faviconWidth
+        favcanvas.height = faviconHeight
+        const favimg = new Image()
+        favimg.crossOrigin = 'anonymous'
+        favimg.src = favicon.href
+        const favcontext = favcanvas.getContext('2d')
+        favicons.push({ favcanvas, favimg, favcontext, favicon })
+      }
+    })
   }
 
   const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
 
   const clearFaviconBadge = () => {
-    if (!favimg || !favcontext || !favicon) return
+    if (favicons.length === 0) return
+    favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
+      if (!favimg || !favcontext || !favicon) return
 
-    favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
-    if (isImageLoaded(favimg)) {
-      favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
-    }
-    favicon.href = favcanvas.toDataURL('image/png')
+      favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
+      if (isImageLoaded(favimg)) {
+        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+      }
+      favicon.href = favcanvas.toDataURL('image/png')
+    })
   }
 
   const drawFaviconBadge = () => {
-    if (!favimg || !favcontext || !favcontext) return
-
+    if (favicons.length === 0) return
     clearFaviconBadge()
+    favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
+      if (!favimg || !favcontext || !favcontext) return
 
-    const style = getComputedStyle(document.body)
-    const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
+      const style = getComputedStyle(document.body)
+      const badgeColor = `${style.getPropertyValue('--badgeNotification') || 'rgb(240, 100, 100)'}`
 
-    if (isImageLoaded(favimg)) {
-      favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
-    }
-    favcontext.fillStyle = badgeColor
-    favcontext.beginPath()
-    favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
-    favcontext.fill()
-    favicon.href = favcanvas.toDataURL('image/png')
+      if (isImageLoaded(favimg)) {
+        favcontext.drawImage(favimg, 0, 0, favimg.width, favimg.height, 0, 0, faviconWidth, faviconHeight)
+      }
+      favcontext.fillStyle = badgeColor
+      favcontext.beginPath()
+      favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
+      favcontext.fill()
+      favicon.href = favcanvas.toDataURL('image/png')
+    })
   }
 
   return {