No Longer possible to change the "favicon" about node-red-dashboard HOT 19 OPEN

Thanks.

It was not working, had to make two modifications:

1. Setup the 'type' of image, was generating error in the console because of not having type. Not sure if correct but stopped complaining.
2. Call the function in the watch when receiving a message
   • For now, have placed a inject module configured to send a message 0.1s after start, since the template node receives the "last" message upon window reload seems to be enough, alternatively wire an event node or a ui-control setup for Connection Events Only to trigger a message.

Without the second step, the browser downloads again the original `favicon.ico´ and the favicon remains the original one. Same behaviour as in original post.

Tried in two instances where Dashboard is already V1.8.1 and it is working, although we can still see the original favicon for a moment when loading the page.

let's hope this new method continues to work in the future.

<template>

</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {

            }
        },
        watch: {
            msg: function(){    
                if(this.msg.payload !== undefined){  
                    console.log('Set Favicon via msg.payload');
                    this.changeFavIcon();
                }
            }
        },
        methods: {
            // expose a method to our <template> and Vue Application
            changeFavIcon () {
                console.log('Enter ChangeFavIcon');
                const src = `/server_Status.png`;
                const link = document.createElement('link');
                //find the existing favicon in document to remove from head
                const oldLink = document.querySelector('link[href="./favicon.ico"]');
                link.id = 'favicon';
                link.rel = 'shortcut icon';
                link.href = src;
                link.type = 'image/png';
                if (oldLink) {
                    document.head.removeChild(oldLink);
                }
                document.head.appendChild(link);
                console.log('Exit ChangeFavIcon');
            },
        },
        mounted() {
            console.log('Setup window Load Event');
            //document.querySelector('link[rel="icon"]').setAttribute('type','image/png');
            //document.querySelector('link[rel="icon"]').setAttribute('href','/server_Status.png');
            this.changeFavIcon();
            console.log('Icon Setup');
            // code here when the component is first loaded
            
        },
        unmounted() {
        }
    }
</script>
<style>
</style>

from node-red-dashboard.

the code you used from the forum assume the existence of jquery. I modified it below to use document instead and added comments for you. the following code should work to change the favicon of your app

add a method in your ui-template to easily change the favicon as below ..

 methods: {
        changeFavIcon (src) {
              //find the existing favicon in document to remove from head
               const oldLink = document.querySelector('link[href="./favicon.ico"]')
              if (oldLink) {
                  document.head.removeChild(oldLink)
              }
             const link = Object.assign(document.createElement('link'), {id: 'dynamic-favicon', rel: 'shortcut icon', href: src});
              // add the new favicon to head
              document.head.appendChild(link)
        },
 },

use it this way from mounted

  mounted() {
           const favIconHref = 'href of your image here -- add either icon data:image/png;base64 (that is encoded base64 of your image) OR icon href relative to ./ dashboard root OR full URL of an image!`
            this.changeFavIcon(favIconHref)
        },

from node-red-dashboard.

in all cases ideally a config for fav icons gets to be part of the ui-base config because it's application-wide.
i am using Chrome and it actually works Ok with me even in refreshes and I am guessing its working because that though the original icons still in the DOM, my changes come last in head by the widget load so it gets applied but hey I am not essentially too fuss atm :)

from node-red-dashboard.

Can you please provide the link to the forum where you got this code?
I'd like to be able to change the favicon, but this ticket seems incomplete.

from node-red-dashboard.

The ideia was from this thread -> https://discourse.nodered.org/t/browser-tab-icon/85925

from node-red-dashboard.

I can't follow the 'how-to' here, and cant get it to work.
I will open a Node-RED forum thread for favicon in dash2.0 and get a working solution for all to share.
Thanks for the tip that it needs an inject after the page loads.

from node-red-dashboard.

@thebaldgeek At least for me, is basically copy that code to a template node.

Setup the template to be UI-Scoped

And make sure that you have the static folder setup.

Node-Red on file settings.js have the property httpStatic setup to a system folder, and place the image of the favicon on the folder.

I am using *.png. Change the line const src = "/server_Status.png"; to the correct image name (assumes that is in the root of the static folder.

And set a inject module to send a message to the template node (set to send after 0.1s)

Flow example (i think it is correct, just exported the required nodes)

[
    {
        "id": "67f712a4eb7d2b5b",
        "type": "inject",
        "z": "08258208cc944d94",
        "name": "",
        "props": [
            {
                "p": "payload"
            },
            {
                "p": "topic",
                "vt": "str"
            }
        ],
        "repeat": "",
        "crontab": "",
        "once": true,
        "onceDelay": 0.1,
        "topic": "",
        "payload": "",
        "payloadType": "date",
        "x": 230,
        "y": 220,
        "wires": [
            [
                "26804ac671ce28d6"
            ]
        ]
    },
    {
        "id": "e7b432f591473419",
        "type": "ui-control",
        "z": "08258208cc944d94",
        "name": "",
        "ui": "9df4836d2f5c3db3",
        "events": "connect",
        "x": 220,
        "y": 180,
        "wires": [
            [
                "26804ac671ce28d6"
            ]
        ]
    },
    {
        "id": "26804ac671ce28d6",
        "type": "ui-template",
        "z": "08258208cc944d94",
        "group": "e347ef2c4f0a3336",
        "ui": "9df4836d2f5c3db3",
        "name": "Change Favicon",
        "order": 0,
        "width": 0,
        "height": 0,
        "head": "",
        "format": "<template>\n\n</template>\n\n<script>\n    export default {\n        data() {\n            // define variables available component-wide\n            // (in <template> and component functions)\n            return {\n\n            }\n        },\n        watch: {\n            msg: function(){    \n                if(this.msg.payload !== undefined){  \n                    console.log('Set Favicon via msg.payload');\n                    this.changeFavIcon();\n                }\n            }\n        },\n        methods: {\n            // expose a method to our <template> and Vue Application\n            changeFavIcon () {\n                console.log('Enter ChangeFavIcon');\n                const src = `/NG_Logo.png`;\n                const link = document.createElement('link');\n                //find the existing favicon in document to remove from head\n                const oldLink = document.querySelector('link[href=\"./favicon.ico\"]');\n                link.id = 'favicon';\n                link.rel = 'shortcut icon';\n                link.href = src;\n                link.type = 'image/png';\n                if (oldLink) {\n                    document.head.removeChild(oldLink);\n                }\n                document.head.appendChild(link);\n                console.log('Exit ChangeFavIcon');\n            },\n        },\n        mounted() {\n            console.log('Setup window Load Event');\n            //document.querySelector('link[rel=\"icon\"]').setAttribute('type','image/png');\n            //document.querySelector('link[rel=\"icon\"]').setAttribute('href','/server_Status.png');\n            this.changeFavIcon();\n            console.log('Icon Setup');\n            // code here when the component is first loaded\n            \n        },\n        unmounted() {\n        }\n    }\n</script>\n<style>\n</style>",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "widget:ui",
        "className": "",
        "x": 460,
        "y": 200,
        "wires": [
            []
        ]
    },
    {
        "id": "9df4836d2f5c3db3",
        "type": "ui-base",
        "name": "My Dashboard",
        "path": "/dashboard",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "default"
    },
    {
        "id": "e347ef2c4f0a3336",
        "type": "ui-group",
        "name": "Ambien Values",
        "page": "3cdf194d3e1f3330",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": false,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "3cdf194d3e1f3330",
        "type": "ui-page",
        "name": "Values Visualization",
        "ui": "9df4836d2f5c3db3",
        "path": "/values_view",
        "icon": "chart-timeline",
        "layout": "grid",
        "theme": "6abc079232f2e7a5",
        "order": 6,
        "className": "",
        "visible": "true",
        "disabled": "false"
    },
    {
        "id": "6abc079232f2e7a5",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#097479",
            "primary": "#097479",
            "bgPage": "#111111",
            "groupBg": "#333333",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "6px",
            "groupGap": "6px",
            "groupBorderRadius": "4px",
            "widgetGap": "6px"
        }
    }
]

from node-red-dashboard.

@arturv2000 hmm I dont know why doesn't it work with you where it works fine with me! I also use version 1.8.1
you shouldn't need to use injects or any of the other workarounds - it might be that your component is not yet mounted , available in DOM or similar - I tried it again on new ui-template and it changes the favicon .. yes it does for a ms show the default icon but then it replaces it when the Widget loads - looks like you already use a ui-template setup with type UI-Scoped .. that's odd, there is nothing much to it really..
can you open the Dev Tools and see if your link element has been injected ? yeah type might have been needed, I use just a svg so looks like it didnt require setting the type attribute
needs more digging but I would first try a sample http image or base64 encoded image rather than an image stored in static folder of node-red to verify things work as expected first try setting href to 'https://vuetifyjs.b-cdn.net/docs/images/components/v-empty-state/astro-dog.svg'

from node-red-dashboard.

One thing I forgot to mention, the changes as you suggested (after fixing the type) indeed work, but only without refreshing the browser (I mean, if a make a Node-Red Deploy, the favicon on the current dashboard windows opened would change, but if i would refresh the page would change again to the default).

I think I have it working now without needing to inject the message to the ui-template.

Apparently the "head" section has changed quite lot in 1.7.x and 1.8.x.

In v1.7.1 (already has my own favicon):

In v1.8.1 (default)

There are more "tags" related to icons and stuff, for what i can tell related to PWA functionality.

So for v1.7.1, this is all is required (at least in my installation), changing the type was not necessary before...

document.querySelector('link[rel="icon"]').setAttribute('type','image/png');
document.querySelector('link[rel="icon"]').setAttribute('href','/server_Status.png');

For v1.8.1 the way a get it is:

changeFavIcon () {
    console.log('Enter ChangeFavIcon');
    const alternate_icon = document.querySelector('link[rel="alternate icon"]');
    if(alternate_icon){
        console.log('Alternate icon found');
        document.head.removeChild(alternate_icon);
    }else{
        console.log('Alternate icon not found');
    }

    const src = `/server_Status.png`;
    const link = document.createElement('link');
    //find the existing favicon in document to remove from head
    const oldLink = document.querySelector('link[href="./favicon.ico"]');
    link.rel = 'icon';
    link.href = src;
    link.type = 'image/png';
    if (oldLink) {
        //document.head.removeChild(oldLink);
        document.head.replaceChild(link, oldLink);   //Optional, instead of replacing it, we can remove and append a new link
    }else{
        document.head.appendChild(link);
    }
    console.log('Exit ChangeFavIcon');
},

I need to remove the "alternate icon" link, otherwise after a reload the old icon would show up.

Probably the correct option, would be to replace all the icon tags:

• 'rel="icon"'
• 'rel="alternate icon"'
• 'rel="apple-touch-icon"'
• 'rel="mask-icon"'

In case this 'links' exists.. for correct ones with the correct icon image file. And most likely is a good idea to use svg instead of png.

from node-red-dashboard.

I still cant get any of this working. I suspect its the httpStatic setting in settings.js.
I have never used that setting before and I have both Windows and Linux I need to swap out the favicon for.
Also, because reasons, its really hard for me to keep restarting Node-RED lots of times while I try and get the settings.js sorted.

Its such a tiny image, I'd rather use the base64 encoded image in the flow like the original post:
const favicon32 =data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAqlJREFUWEft1kuoVlUYBuDH1EE6CFLTgYGXQANpUIlG5hWNEAWdhA6EBEdmIOpAFKOJE1F04EgtMgKVIBFEUSsFE7yLgpCaJoGJ5R00LC/ri28ftr9HzxF+OQRnjf79r7W/9a73e9937S54qANHl04AnQz8bxh4H/dwuMmOecwF43EKf7ayyQ/4Cx+/SAC/4xPs6QgAQcXfheLJHQFgGPrgR8zDwWTgGn7N31ULZuE99Mdl7MW/T2lLX4zAK/gDF3A/14aeLuE/DXyNAPE2TuNGLopWfF4DMAg98/k3DMU5fNigm+5Yg9k4kpsPwDu4jTv4pYAfWwGImlE8TjvxGS2INXOxEw+Stf04ipk1FhYXVpYWRkfnXDU1A8sTSLAbo8UF7QHQmgvmFCBr0StPF0V/LmK+2ACqAnEM32JlswBE68K6o3LjCkCwGXppHD9lWxY1C0CI9wqm4/ss+lmh9ovSqpHZ6wpEaOwAphVx7mgWgFeLc65mQG2pFT2OIamnAPg6PigiXlH0s6xGyxMamITdzxFEAwvV54t1P0pxxquh7u/yv7dQgQybh3vqowVAv7RLncr6wqdF8ZRi320YnEDinc0Z2+GYtkYLgJdwE6tq3m8LQLyzHeHxN2uLv0mLLmnYPUIoGKhy5jEbxsO6tE6ESPT1Or7MIsFABElQewZdM7aHF68HC7tqm0Wv9yWjdQwRUNGO1VjYKMJ4fjknomicLuwVoRJjQaZdxGvM90jK1xcHnGwQ1SFEQM1vhf+47DagNyKMmv5R+gbOFgbG5T3RiGFCOuO1PFDTAQQzca1vLUL8FHdrCN4tkb8x74+prbWgLcW2d34MvkI4K0T3D6J1Edeb8j659SIBVOqODIic6Ja2PNHggCdc0N4TNnNd0zXwvOA6AXQy8AhPu74B/j7MMgAAAABJRU5ErkJggg== changeFavicon(favicon32)

This way, any one can use the same flow for both instances and there is no need to restart Node-RED to get it working?

from node-red-dashboard.

@nileio It is probably a browser version issue, I am using Microsoft Edge, it is based on Chromium / Chrome but Microsoft / Google add some of their magic.

For the moment it seems to be working with my workarounds.

from node-red-dashboard.

Still unable to get this working on my end.

@joepavitt is changing the favicon worthy of a low priority feature request?
ie, should it be something that is a core option on dash 2.0?
Like a theme option almost.

from node-red-dashboard.

is changing the favicon worthy of a low priority feature request?

Yes, although challenging, but will detail thoughts on the issue once raised

from node-red-dashboard.

This may also be linked, as I know many other 1.8.0+ issues have been to #708

from node-red-dashboard.

is changing the favicon worthy of a low priority feature request?

Yes, although challenging, but will detail thoughts on the issue once raised

I also would like to have some kind of configuration, in order to replace all the required files for favicon, or just a conf to the new directory where they are.

This may also be linked, as I know many other 1.8.0+ issues have been to #708

@joepavitt Regarding this issue, there is another issue related to the favicon / icons and PWA modifications

In order to work properly in Android, it seems that the "manifest.webmanifest" is required, but if fails to download if the page is behind authentication.
The solution is to add crossorigin="use-credentials" in order to work properly.

In order to work properly in Windows / Android and IOS (dindn't test personally, but a college told me that the symbol was OK) this is the current template

<template>

</template>

<script>
    export default {
        data() {
            // define variables available component-wide
            // (in <template> and component functions)
            return {

            }
        },
        methods: {
            // expose a method to our <template> and Vue Application
            changeFavIcon () {
                console.log('Enter ChangeFavIcon');
                const src = '/Icons/favicon-32x32.png';
                const alternate_icon = document.querySelector('link[rel="alternate icon"]');
                if(alternate_icon){
                    console.log('Alternate icon found');
                    document.head.removeChild(alternate_icon);
                }else{
                    console.log('Alternate icon not found');
                }
                
                const link = document.createElement('link');
                //find the existing favicon in document to remove from head
                const oldLink = document.querySelector('link[href="./favicon.ico"]');
                link.rel = 'icon';
                link.href = src;
                link.sizes = "32x32";
                link.type = 'image/png';
                if (oldLink) {
                    //document.head.removeChild(oldLink);
                    document.head.replaceChild(link, oldLink);
                }else{
                    document.head.appendChild(link);
                }

                const link_16_16 = document.createElement('link');
                link_16_16.rel = 'icon';
                link_16_16.href = '/Icons/favicon-16x16.png';
                link_16_16.sizes = "16x16";
                link_16_16.type = 'image/png';
                document.head.appendChild(link_16_16);

                //replace apple-touch-icon
                const apple_touch_icon = document.querySelector('link[rel="apple-touch-icon"]');
                if(apple_touch_icon){
                    const link_apleTouchId = document.createElement('link');
                    link_apleTouchId.href = '/Icons/apple-touch-icon.png';
                    link_apleTouchId.rel = 'apple-touch-icon';
                    link_apleTouchId.sizes = "180x180";
                    link_apleTouchId.type = 'image/png';
                    document.head.replaceChild(link_apleTouchId, apple_touch_icon);
                }

                //Replace MaskIcon
                const mask_icon = document.querySelector('link[rel="mask-icon"]');
                if(mask_icon){
                    const link_maskIcon = document.createElement('link');
                    link_maskIcon.href = '/Icons/safari-pinned-tab.svg';
                    link_maskIcon.rel = 'mask-icon';
                    link_maskIcon.color = "#5bbad5";
                    document.head.replaceChild(link_maskIcon, mask_icon);
                }
                
                //Replace Manifest
                const manifest_icon = document.querySelector('link[rel="manifest"]');
                if(manifest_icon){
                    const link_manifest = document.createElement('link');
                    link_manifest.href = '/Icons/site.webmanifest';
                    link_manifest.rel = 'manifest';
                    link_manifest.crossOrigin  = "use-credentials";
                    document.head.replaceChild(link_manifest, manifest_icon);
                }

                console.log('Exit ChangeFavIcon');
            },
        },
        mounted() {
            console.log('Setup window Load Event');
            this.changeFavIcon();
            console.log('Icon Setup');
            // code here when the component is first loaded
            
        },
        unmounted() {
        }
    }
</script>
<style>
</style>

from node-red-dashboard.

@arturv2000 Just to clarify, your sample code (thank-you for that) uses the path /Icons/ .
What should I do in the settings.js to allow for that?
Does /Icons/ need to be in the settings? Or do I just set the root and make the Icon subdir?

from node-red-dashboard.

@thebaldgeek

I have setup my httpStatic as such.

    httpStatic: [
        {path: '/home/tis/node-red-static/',    root: "/"},
        {path: '/home/tis/node-red-static/Icons/company1/', root: "/icons/"}
    ],

Was having problems replacing the favicon paths by "/Icons/TurboClinicV2/favicon.ico" when i only have had the single static source httpStatic: '/home/nol/node-red-static/', //single static source

All the files (ico and site.manifest), where generated using https://realfavicongenerator.net/

from node-red-dashboard.

Thanks everyone for your help. I have it working!
I used the realfavicon generator website to make all the icons and webmanifest.
Copied all those into a directory called 'Icon' off my static path on my Windows PC.
Had to double escape the C:\ path in settings.js or Node-RED threw an error on startup.
I have an inject node that fires .1 of a second after start up, not sure if I need it, but it works with it, so won't be changing it.
I'm sure there will be some trials moving the site to its home on the Linux sever with the static path, but should be able to get it going.

from node-red-dashboard.

Had to double escape the C:\ path in settings.js

Use forward slashes, Windows works perfectly well with forward slashes and it removes all the problems associated with backslash.

from node-red-dashboard.