Implementing Contextual Favicons (Subpage- or Theme-Specific)

Ask the community
, ,
1

Subpage- or Theme-Specific Favicons
I already have a functional general favicon for my site (via the “Settings” > “Favicon” interface). However, I would like to add two additional favicon-related functionalities to my site:

  1. A “dark mode” favicon for display on dark-mode browser themes.
  2. A special subpage favicon (for a specific subpage)

So far, I attempted to add such functionalities through a custom <link> element (with absolute URLs) in the head section of relevant pages via “Settings” > " Development & integrations" > “Custom Code”. The code appears in the <head> of my published page (I checked via Inspect Element), but does not actually render the contextual favicon (in Chrome at least)

Here’s an example for a “dark mode” favicon with a “media” attribute:

<link   rel="icon" sizes="192x192" media="(prefers-color-scheme: dark)" href="https://static.wixstatic.com/media/randomstring.png" type="image/png" />

Notably, my <link> occurs in the <head> section after the default Wix favicon <link>, so perhaps the browsers ignore the subsequent <link> elements.

Additionally, I attempted to get a custom subpage favicon with JavaScript, using both header custom code and masterPage.js

document.querySelectorAll('link[href*="https://static.wixstatic.com/media/RandomString1.png"]');
Array.prototype.forEach.call(function (element, index) {
element.href = "https://static.wixstatic.com/media/RandomString2.png";
});

However, from my understanding, Wix does not recognize “document.querySelectorAll” to prevent unstable meddling with the section.

Are there any alternative methods or workarounds? There seems to be limited documentation for favicons, besides the singular generic favicon setting. I’m happy to play around with various CSS, HTML, and JS options within the various Wix editing environments, if anyone has ideas/suggestions.

2

Update: if you insert a <link> with type="image/x-icon" in the <head> section via Settings (as “Custom Code”), it will override the earlier default Wix <link> elements. However, Chromium browsers still do not recognize the media="(prefers-color-scheme: dark) attribute, and will use whichever ICO <link> comes last, irrespective of all preceding <link> elements.

Thus, it is a useful workaround for Functionality #2 (special favicon for a subpage), but not for Functionality #1 (theme-specific favicon).

3

Hello.
I had o similar task to do in WIX Classic Editor.
This answer is as a additional solution for those whom need alternative solution and will find this topic via Google as I did.

I used code below via Dev Mode in WIX.
Pasted in masterPage.js.

import wixLocation from 'wix-location';

$w.onReady(function () {
    // Get actual path URL
    let currentPage = wixLocation.path.join('/') || 'home';

    // Default favicon
    let faviconUrl = 'https://static.wixstatic.com/media/d69d33_28e102de4b6d4ef597df112d427c5fe8~mv2.png';

    // If it is a /contact subpage, zmień favicon
    if (currentPage === 'contact') {
        faviconUrl = 'https://static.wixstatic.com/media/d69d33_9a2bcb99e16f424c975eeb4f1aa7aab7~mv2.png';
    }

    let htmlElements = $w('HtmlComponent');
    if (htmlElements.length > 0) {
        htmlElements[0].html = `<link rel="icon" type="image/x-icon" href="${faviconUrl}">`;
    } else {
        console.log("No HTML element found on page – add one!");
    }
});