handle multiple favicons (different sizes)

src/services/favicon_service/favicon_service.js

@@ -1,28 +1,30 @@
-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')
+    const nodes = document.querySelectorAll('link[rel="icon"]')
-    favicon = find(nodes, node => node.rel === 'icon')
+    nodes.forEach(favicon => {
       if (favicon) {
-      favcanvas = document.createElement('canvas')
+        const favcanvas = document.createElement('canvas')
         favcanvas.width = faviconWidth
         favcanvas.height = faviconHeight
-      favimg = new Image()
+        const favimg = new Image()
         favimg.crossOrigin = 'anonymous'
         favimg.src = favicon.href
-      favcontext = favcanvas.getContext('2d')
+        const favcontext = favcanvas.getContext('2d')
+        favicons.push({ favcanvas, favimg, favcontext, favicon })
       }
+    })
   }
 
   const isImageLoaded = (img) => img.complete && img.naturalHeight !== 0
 
   const clearFaviconBadge = () => {
+    if (favicons.length === 0) return
+    favicons.forEach(({ favimg, favcanvas, favcontext, favicon }) => {
       if (!favimg || !favcontext || !favicon) return
 
       favcontext.clearRect(0, 0, faviconWidth, faviconHeight)
@@ -30,12 +32,14 @@ const createFaviconService = () => {
         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)'}`
@@ -48,6 +52,7 @@ const createFaviconService = () => {
       favcontext.arc(faviconWidth - badgeRadius, badgeRadius, badgeRadius, 0, 2 * Math.PI, false)
       favcontext.fill()
       favicon.href = favcanvas.toDataURL('image/png')
+    })
   }
 
   return {