How to create dynamic favicon logo in mendix

0
Hi experts,     Does Mendix support to change favicon to dynamic ?   In my case, I want to change favicon if there is a notification and  image bellow shows that Mendix only able to put static favicon       This is the example I want   Is there any option for this ?   Thank you, Zacky
asked
5 answers
0

Try this widget Dynamic Favicon

answered
2

Hi Zacky,

Mendix does not  support changing the favicon dynamically based on events or notifications. Favicon in Mendix remains static throughout the application.

 

To achieve dynamic favicon functionality, you can utilize custom JavaScript or CSS within your Mendix application. 

1. Create a microflow or nanoflow to determine if a notification or event should trigger a favicon change.

2. Use a custom JavaScript snippet in a Mendix widget to update the favicon dynamically. This involves accessing the HTML `<head>` element and modifying the `link` element associated with the favicon.

   Here's an example JavaScript code snippet for dynamic favicon change:

   

var link = document.querySelector("link[rel~='icon']");
link.href = "path_to_new_favicon.png";

   

   Replace "path_to_new_favicon.png" with the actual path to your desired favicon image.

3. Invoke this JavaScript code within the microflow or nanoflow when a notification or event triggers the favicon change.

 

Hope it helps!!!

answered
0

Hi Zacky,

As per my knowledge,Mendix does not have built-in support to dynamically change the favicon.

 

However, we can achieve this using JavaScript or CSS to dynamically change the favicon based on certain conditions or events.

 

The process should be Create a new link element > Remove any existing favicon > Add the new favicon to the document's head.

Thanks,

answered
0

There's an alternative method where you don't need to use the image path, which can be challenging in Mendix. Simply apply the Base64 encode file Java action to the image and load the Base64 using JavaScript like this:

 

export async function JSA_SetFavicon(base64) {

// BEGIN USER CODE

var link = document.querySelector("link[rel~='icon']");

 

if (!link) {

link = document.createElement('link');

link.rel = 'icon';

link.type = 'image/x-icon';

document.head.appendChild(link);

}

 

link.href = "data:image/x-icon;base64," + base64;

// END USER CODE

}

 

This approach works consistently for me. The downside is that the browser won't cache the favicon, resulting in some additional load. It's advisable to use this only with small images like favicons.

answered
0

There is a default Mendix supported action that does just this:

Webactions module, SetFavicon action.

 

 

We initially used the Base64 approach Martin suggested, however for some reason that no longer works. We now use the file path, /file/guid?{GUID}, from the file to set the FavIcon.

At this specific moment, the FavIcon action only overwrites the URL parameters, /guid?{GUID}, but with a very small tweak it no longer overwrites, but actually appends the datetime epoch to the filepath.

 

//This is the original code, which does not append the vDate.now(), but overwrites all existing parameters.

bypassCacheHref.search = "v" + Date.now();

//This is the new code, which specifically appends the vDate.now() parameter, making sure the icon is not loaded from cache, but is always retrieved.

bypassCacheHref.searchParams.append("v", Date.now());

We use that action to set the favicon in a multi tenant app.

answered