# Logo Image in Dashboard Toolbar

**URL:** <https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226>\
**Category:** Dashboard\
**Created:** [2 August 2021 19:07 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226 "2021-08-02T19:07:53Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [2 August 2021 19:07 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/1 "2021-08-02T19:07:53Z")

</div>

I have seen previous posts on this, but not got anything to work.

I want to put an image (a logo) in the toolbar at the top of a Node-RED Dashboard:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/a/7a5e016b3465b90b826b1c8af97a52d4b43e30dd.png)

I have tried this:

[https://flows.nodered.org/flow/9ddf29277057e4666c1923061a507aaa](https://flows.nodered.org/flow/9ddf29277057e4666c1923061a507aaa)

But that has some problems;

1. The logo initially only appears on the Tab containing the Node;
2. Every time you visit that Tab, the logo is added **again** - so I end up with multiple logos;
3. The Browser 'Refersh' removes the logo(s)

I have also tried this:

> **[Image on dashboard](https://forums.opto22.com/t/image-on-dashboard/3042)**
>
> Has anyone here successfully displayed an image on Node-RED dashboard hosted on an EPIC? We have a decent working knowledge of the Dashboard but can’t figure out where we’ve gone wrong.

But that puts the image in the tab - not the header.

It also seems to suffer from the browser refresh problem.

So how can I actually get a logo in the Dashboard Toolbar for _ **every** _ Tab that will survive a browser refresh?

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [2 August 2021 19:09 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/2 "2021-08-02T19:09:40Z")

</div>

> [@awneil](#):
>
> I have tried this:
> 
> [Node-red-dashboard logo in header (flow) - Node-RED](https://flows.nodered.org/flow/9ddf29277057e4666c1923061a507aaa)

also this:

> [@Set a logo in the title bar?](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/9):
>
> Hi all, Did any of you manage to do this? If not, I have some code which could help you out. Please have a look at this flow: [{"id":"42b8d6d1.fc68e8","type":"ui\_template","z":"7e61871d.8d71a8","group":"feabd600.f71b28","name":"Logo / Clock","order":0,"width":0,"height":0,"format":"\<script id=\"clockScript1\" type=\"text/javascript\"\>\n var clockInterval;\n $(function () {\n if (clockInterval) return;\n\n //add logo\n var div1 = $('\<div/\>');\n var logo = new I…

but the forum will only allow a new user to post 2 links

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [2 August 2021 19:26 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/3 "2021-08-02T19:26:50Z")

</div>

Another one that puts the image in the dashboard body:

> **[node-red-contrib-ui-media](https://flows.nodered.org/node/node-red-contrib-ui-media)**
>
> A simple NODE to allow images and videos on the dashboard

This one does seem to survive a browser refresh.

But it seems to be doing some scaling of the image - and I see nothing to control that.

🙄

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 August 2021 19:57 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/4 "2021-08-02T19:57:48Z")

</div>

> [@awneil](#):
>
> But it seems to be doing some scaling of the image - and I see nothing to control that.

The scaling appears to be based on choice of **layout** setting in the node. "Expand" seems to fit to widget size setting.

3x3, 6x6 and 12x12

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f530406ebe5e57177241b15200e4744255aa288b.jpeg)

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [2 August 2021 20:23 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/5 "2021-08-02T20:23:09Z")

</div>

> [@Gunner](#):
>
> "Expand" seems to fit to widget size setting.

only if the widget size is larger than the image?

even then, it seems to have enlarged the image.

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 August 2021 20:26 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/6 "2021-08-02T20:26:01Z")

</div>

I can only speak for the image I used... PNG 800x800 pixels. Way larger than my smallest widgets or possibly even the entire card size.

But then this has little to do with the original issue of an image in the header. I haven't had much success there either

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 August 2021 21:19 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/7 "2021-08-02T21:19:09Z")

</div>

> [@Gunner](#):
>
> I haven't had much success there either

OK, aside form getting the image properly converted to Base64

(I used [Image to Base64 | Base64 Encode | Base64 Converter | Base64](https://base64.guru/converter/encode/image) and the output option **data:image/png;base64** )

The persistence issue is resolved with a timer (I picked out of a dashboard clock header).

Put this in your `template` node

```auto
<script id="titleScript" type="text/javascript">

$(function() {
    if($('.md-toolbar-tools').length != 0){
        loadLogo();
    }else setTimeout(loadLogo, 500)
});

function loadLogo(){
    
        //add logo
        var div1 = $('<div/>');
        var logo = new Image();

        logo.src = 'data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='
        logo.height = 45;
        div1[0].style.margin = 'auto 10px auto auto';

        div1.append(logo);

        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
        }
        addToToolbar();
        
    document.clockInterval = setInterval(upTime,1000);
}

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 August 2021 21:44 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/8 "2021-08-02T21:44:05Z")

</div>

I was bored. Made another version of how to get logo to top-bar..  
Script is targeted to document head so it does not take any space in layout and exists for all dashboard tabs and survives resets.

```auto
[{"id":"d365d02956b1c509","type":"ui_template","z":"c95b36a3f921c249","group":"3ad2bc4a7ed3c9a3","name":"top-bar logo","order":1,"width":0,"height":0,"format":"<style>\n #top-bar-logo {\n background-image: url(https://nodered.org/about/resources/media/node-red-icon-2.png);\n background-size: contain;\n background-repeat: no-repeat;\n background-position: center;\n height: 100%;\n width: 100%;\n}\n</style>\n\n<script id=\"logo-script\" type=\"text/javascript\">\nfunction build(){\n $(\"#top-bar-logo\").remove()\n var logo = $('<div />').attr(\"id\",\"top-bar-logo\");\n var topbar = $('.md-toolbar-tools');\n topbar.append(logo)\n}\nfunction checkExistence(){\n console.log($(\"#top-bar-logo\"))\n if($(\"#top-bar-logo\").length > 0){\n return\n }\n build()\n setTimeout(checkExistence,100)\n}\n\nbuild()\nsetTimeout(checkExistence,100)\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":570,"y":600,"wires":[[]]},{"id":"3ad2bc4a7ed3c9a3","type":"ui_group","name":"Default","tab":"22c859d636852368","order":1,"disp":true,"width":"6","collapse":false},{"id":"22c859d636852368","type":"ui_tab","name":"Away","icon":"dashboard","disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [2 August 2021 21:48 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/9 "2021-08-02T21:48:11Z")

</div>

> [@hotNipi](#):
>
> I was bored

As always, your boredom is our blessing 😃

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [3 August 2021 10:21 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/10 "2021-08-03T10:21:55Z")

</div>

That's great - thanks.

How do I get it to use a local image file on the Raspberry Pi?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 August 2021 10:29 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/11 "2021-08-03T10:29:57Z")

</div>

Many threads about using the static folder of Node-RED, just do the search

You just need to change the url for background image to point to relative path  
`background-image: url(/images/your-local-file-name.png);`

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [3 August 2021 10:55 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/12 "2021-08-03T10:55:56Z")

</div>

> [@hotNipi](#):
>
> Many threads about using the static folder of Node-RED, just do the search

Knowing the correct search term helps.

> [@hotNipi](#):
>
> change the url for background image to point to relative path

Relative to where?

I have **mylogo.png** in my **~/.node-red** folder, but

```auto
background-image: url(/mylogo.png);

```

is not giving any image in the top-bar

EDIT

This is on a Raspberry Pi

EDIT 2

So doing the search adds confusion:

[node.js - Node Red Dashboard Include Images - Stack Overflow](https://stackoverflow.com/questions/41807963/node-red-dashboard-include-images) refers to setting `httpAdminRoot` from default `false` to `true`, but the referenced documentation at [Configuration : Node-RED](https://nodered.org/docs/user-guide/runtime/configuration) says that it's a URL - not a true/false flag ?

And the comments in the `settings.js` file say:

```auto
    // When httpAdminRoot is used to move the UI to a different root path, the
    // following property can be used to identify a directory of static content
    // that should be served at http://localhost:1880/.
    //httpStatic: '/home/nol/node-red-static/',

```

But I haven't _ **moved** _ anything - so where should the default be?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 August 2021 12:25 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/13 "2021-08-03T12:25:18Z")

</div>

I'm afraid I'm not on position to explain the `httpStatic` configuration and usage. It clearly works if it is configured. And most probably the default (not configured) behavior is that no files will be served.

---

<div class="post-metadata">

**Author:** ![awneil](https://avatars.discourse-cdn.com/v4/letter/a/49beb7/32.png) [@awneil](https://discourse.nodered.org/u/awneil)\
**Post date:** [3 August 2021 12:33 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/14 "2021-08-03T12:33:43Z")

</div>

OK, so the answer on serving-up local files - "_static files_" - became clear from this thread:

> [@How to enable ability to input local image files in to node red dashboard](https://discourse.nodered.org/t/how-to-enable-ability-to-input-local-image-files-in-to-node-red-dashboard/3085):
>
> From online forums, I've been able to gleam that I need to make changes to both the //httpAdminRoot: '/admin', and //httpStatic: '/home/node-red-static/', lines in the settings.js file. Are these the only two lines I need to edit to enable adding local files to my flows? Would simply removing their comment dashes provide me with the capability to load local files? Would anyone be able to recommend how I would change these lines so that I could load images from a local folder named "node\_im…

I still can't say that I'd have got there from reading the comments in the `settings.js` file, though.

Thanks, everyone - it is now working 😁

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [3 August 2021 22:27 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/15 "2021-08-03T22:27:37Z")

</div>

You have solved it, but there are many ways of injecting a file... I have a simple fie server running on my RPi that could feed the image via it's (the RPi) IP and the server's port in a URL along with the file name.

Or, in this case, I just used a shared link from my dropbox account. This way it would work from any PC/phone/browser that can access my NR

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/9/d9e38cd060b6fb507cad146f61f6fe3398cc244f.png)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [17 August 2021 22:28 UTC](https://discourse.nodered.org/t/logo-image-in-dashboard-toolbar/49226/16 "2021-08-17T22:28:24Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.