Change favicon in Node Red

Dashboard
1

How I can I change the favicon in the Node Red site ?

3

That’s currently not easy to do. You can replace the images in the dist folder but they may get overwritten on an upgrade unless you save them.

2 Likes
4

Did any easier way surface for changing favicon yet?

When we were still on Google Groups - below was posted:

How can I provide a custom favicon and a custom logo for my dashboard?

Right now the simplest way is to replace the icons in your ~/.node-red/node_modules/node-

red-dashboard/dist directory… and then edit the dashboard.appcache to also point to the new files.

https://groups.google.com/forum/?hl=en-GB#!topic/node-red/nJ_UKETxtIo

Allright folks i changed the icon in the node-red-dashboard/dist (smthing like that) folder and it didnt worked at the first try because i didnt clear the cache on my phone. I cleared the cache and i did "add to homescreen" again and it looked the way a wanted to. The .png file to modify is named icon64x64.png or icon192x192.png and i believe if you are iOS youll need to add an icon120x120.png in the same directory

~/.node-red/node_modules/node-red-dashboard/dist

The iOS icon size info is listed here https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

5

no. nothing has changed.

1 Like
6

Why not just use the template node?

[
    {
        "id": "5439e2fa04d0ab12",
        "type": "ui_template",
        "z": "ffc0171904d07147",
        "group": "40347547aa3cd9fd",
        "name": "favicon",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<link rel=\"icon\" type=\"image/x-icon\" href=\"https://external-content.duckduckgo.com/ip3/nodered.org.ico\">",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "global",
        "className": "",
        "x": 120,
        "y": 40,
        "wires": [
            []
        ]
    },
    {
        "id": "40347547aa3cd9fd",
        "type": "ui_group",
        "name": "Styles",
        "tab": "3e782fdfa1feb5fa",
        "order": 1,
        "disp": false,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "3e782fdfa1feb5fa",
        "type": "ui_tab",
        "name": "Styles",
        "icon": "dashboard",
        "order": 3,
        "disabled": false,
        "hidden": false
    }
]