Skip to content

Instantly share code, notes, and snippets.

@mohnen
Last active December 11, 2023 22:32
Show Gist options
  • Save mohnen/6923d5eb2e4547bb7e5bd90546d2ee80 to your computer and use it in GitHub Desktop.
Save mohnen/6923d5eb2e4547bb7e5bd90546d2ee80 to your computer and use it in GitHub Desktop.
Changing Favicons for node-red Dashboards

Changing Favicons for node-red Dashboards

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

icon192x192

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.

@jackc94
Copy link

jackc94 commented Apr 24, 2023

@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() } } },

@T-21
Copy link

T-21 commented May 25, 2023

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

@Lorilatschki
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment