Favicons in tabs (In the latest Version)

css/tabBar.css

@@ -183,6 +183,19 @@ body:not(.touch)
   margin-left: -0.5rem;
 }
 
+.favicon {
+  display: none; /* Default state (not enbabled) */
+}
+
+#navbar.show-favicons .favicon {
+  display: revert;
+  width: 16px;
+  height: 16px;
+  margin: auto 0;
+  padding: 0;
+  font-size: 1.1em !important;
+}
+
 .tab-item .tab-icon {
   position: relative;
   font-size: 0.875em;

js/navbar/tabBar.js

@@ -52,6 +52,16 @@ const tabBar = {
     tabEl.appendChild(readerView.getButton(data.id))
     tabEl.appendChild(tabAudio.getButton(data.id))
     tabEl.appendChild(progressBar.create())
+    if (data.favicon) {
+      var favicon = document.createElement('img')
+      favicon.className = 'favicon'
+      if (data.favicon) {
+        favicon.src = data.favicon.url
+      } else {
+        favicon.src = data.favicon.url
+      }
+      tabEl.appendChild(favicon)
+    }
 
     // icons
 
@@ -178,6 +188,19 @@ const tabBar = {
     var audioButton = tabEl.querySelector('.tab-audio-button')
     tabAudio.updateButton(tabId, audioButton)
 
+    if (tabData.favicon) {
+      // 2 scenarios, either favicon was already loaded or it was not loaded
+      var favicon = tabEl.getElementsByClassName('favicon')[0]
+      if (favicon) {
+        favicon.src = tabData.favicon.url
+      } else {
+        var favicon = document.createElement('img')
+        favicon.className = 'favicon'
+        favicon.src = tabData.favicon.url
+        audioButton.before(favicon)
+      }
+    }
+
     tabEl.querySelectorAll('.permission-request-icon').forEach(el => el.remove())
 
     permissionRequests.getButtons(tabId).reverse().forEach(function (button) {
@@ -237,6 +260,14 @@ const tabBar = {
       tabBar.navBar.classList.remove('show-dividers')
     }
   },
+  handleFaviconPreference: function (faviconPreference) {
+    console.log('faviconPreference', faviconPreference) 
+    if (faviconPreference === true) {
+      tabBar.navBar.classList.add('show-favicons')
+    } else {
+      tabBar.navBar.classList.remove('show-favicons')
+    }
+  },
   initializeTabDragging: function () {
     tabBar.dragulaInstance = dragula([document.getElementById('tabs-inner')], {
       direction: 'horizontal',
@@ -277,6 +308,10 @@ settings.listen('showDividerBetweenTabs', function (dividerPreference) {
   tabBar.handleDividerPreference(dividerPreference)
 })
 
+settings.listen('showFaviconInTabs', function (showFaviconTabPreference) {
+  tabBar.handleFaviconPreference(showFaviconTabPreference)
+})
+
 /* tab loading and progress bar status */
 webviews.bindEvent('did-start-loading', function (tabId) {
   progressBar.update(tabBar.getTab(tabId).querySelector('.progress-bar'), 'start')
@@ -290,7 +325,7 @@ webviews.bindEvent('did-stop-loading', function (tabId) {
 })
 
 tasks.on('tab-updated', function (id, key) {
-  var updateKeys = ['title', 'secure', 'url', 'muted', 'hasAudio']
+  var updateKeys = ['title', 'secure', 'url', 'muted', 'hasAudio', 'favicon']
   if (updateKeys.includes(key)) {
     tabBar.updateTab(id)
   }

js/tabState/tab.js

@@ -29,6 +29,7 @@ class TabList {
       previewImage: '',
       isFileView: false,
       hasWebContents: false,
+      favicon: tab.favicon || null
     }
 
     if (options.atEnd) {

localization/languages/en-US.json

@@ -162,6 +162,7 @@
     "settingsAdditionalFeaturesHeading": "Additional Features",
     "settingsUserscriptsToggle": "Enable user scripts",
     "settingsShowDividerToggle": "Show divider between tabs",
+    "settingsShowFaviconTabsToggle": "Show favicons in tabs",
     "settingsLanguageSelection": "Language: ",
     "settingsSeparateTitlebarToggle": "Use separate title bar",
     "settingsAutoplayToggle": "Enable Autoplay",

pages/settings/index.html

@@ -131,6 +131,14 @@ <h3 data-string="settingsAppearanceHeading"></h3>
         ></label>
       </div>
 
+      <div class="setting-section">
+        <input type="checkbox" id="checkbox-show-favicon-tabs" />
+        <label
+          for="checkbox-show-favicon-tabs"
+          data-string="settingsShowFaviconTabsToggle"
+        ></label>
+      </div>
+
       <div class="setting-section">
         <label for="setting-language-picker" data-string="settingsLanguageSelection"></label>
         <select id="setting-language-picker"></select>

pages/settings/settings.js

@@ -4,6 +4,7 @@ var contentTypeBlockingContainer = document.getElementById('content-type-blockin
 var banner = document.getElementById('restart-required-banner')
 var siteThemeCheckbox = document.getElementById('checkbox-site-theme')
 var showDividerCheckbox = document.getElementById('checkbox-show-divider')
+var showFaviconTabsCheckbox = document.getElementById('checkbox-show-favicon-tabs')
 var userscriptsCheckbox = document.getElementById('checkbox-userscripts')
 var userscriptsShowDirectorySection = document.getElementById('userscripts-show-directory')
 var separateTitlebarCheckbox = document.getElementById('checkbox-separate-titlebar')
@@ -285,6 +286,18 @@ showDividerCheckbox.addEventListener('change', function (e) {
   settings.set('showDividerBetweenTabs', this.checked)
 })
 
+/* show favicons in tabs setting */
+
+settings.get('showFaviconInTabs', function (value) {
+  if (value === true) {
+    showFaviconTabsCheckbox.checked = true
+  }
+})
+
+showFaviconTabsCheckbox.addEventListener('change', function (e) {
+  settings.set('showFaviconInTabs', this.checked)
+})
+
 /* language setting*/
 
 var languagePicker = document.getElementById('setting-language-picker')