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
4 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