Changing Favicons for node-red Dashboards

Changing Favicons for node-red Dashboards.md

Changing Favicons for node-red Dashboards

Dashboards created with node-red-dashboards all have the same favicon

You can easily change this by changing the icons in the .node-red/node-modules/node-red-dashboard/dist, but this change will be lost the next time you update node-red-dashboard.

To get a permanent change, add your icon as files icon64x64.png, icon120x120.png, and icon192x192.png to a folder of your choice, e.g. /home/nodereduser/.node-red/icons, where nodereduser is the user executing node-red.

Then stop node-red and add this to .node-red/settings.js

• Updated Version w/o full path

  ui: {
      middleware: function (req, res, next) {
        if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) {
          res.sendFile(path.resolve(path.join(__dirname, 'icons', req.url)))
        } else {
          next()
        }
     }
  },

• Old Version

ui: {
      middleware: function (req, res, next) {
        path = require('path')
        if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) {
          res.sendFile(path.resolve(path.join('/home/nodereduser/.node-red/icons', req.url)))
        } else {
          next()
        }
      }
    },

Start node-red again, clear caches on all clients, and enjoy your changes favicons.

@mohnen I am trying to apply this to my node-red Dashboard hosted in Docker... should this work in your opinion?

ui: { middleware: function (req, res, next) { if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) { res.sendFile(path.resolve(path.join('/data/icons', req.url))) } else { next() } } },

Or should I just need:

ui: { middleware: function (req, res, next) { if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) { res.sendFile(path.resolve(path.join('/icons', req.url))) } else { next() } } },

This is the docker-compose.yml:

version: "3.7" services: node-red: image: nodered/node-red:latest container_name: node-red environment: - TZ=Europe/London network_mode: host restart: unless-stopped volumes: - ~/.node-red:/data

I managed to work this out myself for those using Docker deployment of node-red:

Find the ui section of the settings.js file (quite near the end, under Node Settings) and amend as follows (obviously replacing with your file path):

ui: { path: "/", middleware: function (req, res, next) { path = require('path') if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) { res.sendFile(path.resolve(path.join('/data/dashboard/icons', req.url))) } else { next() } } },

This is the method I used, I altered the snippet a little bit to make it work inside docker.

Custom Node-Red favicons using docker:

1. Navigate to the 'data' directory of your Node-Red container

2. create a folder for the custom icon files (name it 'custom_icons'):

   mkdir custom_icons

3. Place the .png files into the created path

4. Edit settings.js.

5. Go all the way to the bottom of the file and find the commented out "//ui:" part. Directly under it, past the following code:

    ui: {
    path: "/ui/",
    middleware: function (req, res, next) {
        var path = require('path');
        if (['/icon64x64.png', '/icon120x120.png', '/icon192x192.png'].includes(req.url)) {
    	    res.sendFile(path.resolve(path.join('/data/custom_icons', req.url)));
        } else {
        next();
        }
    }
    },
   

6. Check the path on line 6 and make sure it matches the path of your custom_icons folder, if not, adjust accordingly.

Save the file and restart Node-Red to see the icons

@T-21 this worked on my site as well! Thanks for the adaption regarding running node-red inside docker!