Use larger favicons when available?

[jathek]

I use custom css for the sidebar to increase the size of tabs and favicons. Sometimes the favicon gets blurry as it's a 16x16 image that gets scaled up. Other times a site's favicon seems to be using a high-res version. For some sites, I can see in the code that there is a high-res version that Firefox/Sidebery is not using. Is there a way to make Firefox/Sidebery use high-res favicons when available?

low res:

high-res available in page source:

page after I edited source via inspector to use high-res icon for low-res size:

sample link for above css code to create the bigger sizes I have:

#root {
    --tabs-height: 42px;
    --tabs-pinned-height: var(--tabs-height);
    --tabs-pinned-width: var(--tabs-height);
    --selected-bg: rgba(0, 108, 151, 0.8) !important;
    --selected-border: var(--selected-bg) !important;
    --fav-size: 24px;
  }

  .Tab .fav {
    width: var(--fav-size);
    height: var(--fav-size);
  }
  .Tab .fav > .fav-icon {
    width: var(--fav-size);
    height: var(--fav-size);
    /*  filter: drop-shadow(0px 0px 4px rgba(220,220,220,0.3)) !important;*/
  }

[mbnuqw]

It's technically possible, to implement this I need to inject a script in each new page to parse head section and find the appropriate link, then ask background script to load it, send loaded favicon to the connected sidebars and store in cache. I'll need to add a setting for this feature in Tabs section (or create hidden section for advanced users) and ask user for Web Data permission (<all_urls>). Not sure about priority, but more likely after v5 release.

[jathek]

I'm using this userscript for now but it breaks on pages with CSP, like this one:

// ==UserScript==
// @name         Use Large Favicons
// @namespace    http://tampermonkey.net/
// @version      2022.10.2
// @description  replace 16x16 favicons with larger favicons
// @match        *://*/*
// @grant        GM_addElement
// ==/UserScript==

(function () {
  "use strict";
  // Your code here...
  let favicon = document.querySelector('link:is([rel="shortcut icon"],[sizes="16x16"])');
  if (typeof(favicon) != 'undefined' && favicon != null) {
    const faviconNodeList = document.querySelectorAll('link[sizes]:not([sizes="16x16"],[rel^="apple-touch"])');
    const faviconArray = Array.from(faviconNodeList);
    const sortedfaviconArray = faviconArray.sort(sorter);
    function sorter(a,b) {
      return parseInt(a.getAttribute('sizes')) - parseInt(b.getAttribute('sizes'));
    }
    sortedfaviconArray.push(favicon); // push 16x16 in case array is empty
    GM_addElement(document.querySelector('head'), 'link', {
      rel: "icon",
      sizes: '16x16',
      href: sortedfaviconArray[0].href,
    });
  }
})();

EDIT: using the beta version of Tampermonkey with // @sandbox JavaScript lets this run even on the CSP page above.

[mbnuqw]

Just tested your script (with empty extensions.webextensions.restrictedDomains in about:config) and it works perfectly (on tested pages).

I completely forgot about user scripts. They actually can solve almost all described problems and all I need to do is provide an option (probably hidden) to set size of cached icons (currently, sidebery resizes favicons (provided by browser.tabs WE API) to 16 x devicePixelRatio for cache (cached favicons used in bookmarks and history panels))

[jathek]

Yeah, it works pretty well so far. So far I am:

• excluding apple-touch icons since those look bad as favicons.
• sorting the favicon array so that it prefers icons that are smaller (24px and up) vs icons that are 128x128. This avoids loading larger than necessary images.
• falling back to the original favicon if no larger ones are found using the [sizes] attribute.

If you (or anyone else) have any other suggestions let me know.

There are so many varied ways that people add favicons to pages that it will never work 100%, but it seems to work on a lot of pages right now. The only caveat is that it runs on every single page, but there's no way around that.

Also, it looks normal Tampermonkey updated to 4.18 a couple of days ago, and after using that it appears // @sandbox JavaScript is no longer needed.