# Logo in UI title bar on AWS server

**URL:** <https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873>\
**Category:** General\
**Created:** [12 March 2019 11:35 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873 "2019-03-12T11:35:39Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [12 March 2019 11:35 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/1 "2019-03-12T11:35:39Z")

</div>

Hello

I am trying to implement my own personal logo and clock in the title bar of my UI dashboard. I have node-red running an AWS EC2 server on ubuntu.

I have been reading this thread [Set a logo in the title bar?](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/19). The code for my template node is below.

The clock works a treat but the but the logo image does not display (see screen shot below). I suspect this is because I haven't set the correct path for the httpStatic setting in the settings.js file. The full path of the directory where my logo sits is /home/ubuntu/.node-red/logo directory

In the settings file I have:  
httpStatic: '/logo'

Do I have the correct path name set?

 ![query](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9f66f9b79f4517ebb84161f84a4e6a5a7172bbb0.png)

```auto
<script id="clockScript1" type="text/javascript">
    var clockInterval;
    $(function () {
        if (clockInterval) return;

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

        logo.src = 'dashboardlogo.png'
        logo.height = 45;
        div1[0].style.margin = '10px auto';

        div1.append(logo);

        //add clock
        var div2 = $('<div/>');
        var p = $('<p/>');

        div2.append(p);
        div2[0].style.margin = '5px';

        function displayTime() {
            p.text(new Date().toLocaleString());
        }
        
        clockInterval = setInterval(displayTime, 1000);

        //add to toolbar when it's available
        var addToToolbarTimer;
        
        function addToToolbar() {
            var toolbar = $('.md-toolbar-tools');
            
            if(!toolbar.length) return;
            
            toolbar.append(div1);
            toolbar.append(div2);
            clearInterval(addToToolbarTimer);
        }
        addToToolbarTimer = setInterval(addToToolbar, 100);
    });
</script>

```

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [12 March 2019 12:50 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/2 "2019-03-12T12:50:42Z")

</div>

> [@Sirhc](#):
>
> httpStatic: '/logo'

That should be set to the directory containing the static content: `/home/ubuntu/.node-red/logo`

And you'll have to make sure the url used in the code is correct - you are currently just setting it to `dashboardlogo.png` so it will get loaded relative to the url the dashboard is on - depending on how you've set things up, that would be `/ui/dashboard.logo.png`. That is _not_ the path `httpStatic` will be served from. You'd need to set the image url to `/dashboardlogo.png` - again, depending on what other path customisations you may have made.

---

<div class="post-metadata">

**Author:** ![Sirhc](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Sirhc](https://discourse.nodered.org/u/Sirhc)\
**Post date:** [13 March 2019 11:05 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/3 "2019-03-13T11:05:22Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![mischkasmith](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/mischkasmith/32/31586_2.png) [@mischkasmith](https://discourse.nodered.org/u/mischkasmith)\
**Post date:** [25 November 2020 21:26 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/4 "2020-11-25T21:26:13Z")

</div>

Hello,  
I found a better solution without webserver or a static site.

Convert the picture to base64 on this site [https://www.base64-image.de/](https://www.base64-image.de/) and paste the code in quotes after `logo.src =`

 ![Bildschirmfoto vom 2020-11-25 22-25-42](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22bb84bd25dd38afd19d573c5eb6aca4bcd84af3.png)

---

<div class="post-metadata">

**Author:** ![hederson2801](https://avatars.discourse-cdn.com/v4/letter/h/d78d45/32.png) [@hederson2801](https://discourse.nodered.org/u/hederson2801)\
**Post date:** [26 January 2021 13:55 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/5 "2021-01-26T13:55:03Z")

</div>

Hello, I am using code in this page.

> [@Set a logo in the title bar?](https://discourse.nodered.org/t/set-a-logo-in-the-title-bar/618/8):
>
> hi echtelerp. No I’m sorry, I couldn’t do it i will try again tomorow and if I succeed i will shared the solution with you.

This is running very well, until I opened it on my TV where my graph will appear. The time is correct on computers and other devices, but on TV it doesn't work. There would be a way for me to set the time directly from my raspbarry pi.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [26 January 2021 15:25 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/6 "2021-01-26T15:25:35Z")

</div>

What browser is your TV using ? maybe it doesn't support the required level of Javascript ?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [26 January 2021 15:46 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/7 "2021-01-26T15:46:30Z")

</div>

> [@hederson2801](#):
>
> but on TV it doesn't work

Also what do you mean by 'it doesn't work'. Exactly what doesn't work?

---

<div class="post-metadata">

**Author:** ![hederson2801](https://avatars.discourse-cdn.com/v4/letter/h/d78d45/32.png) [@hederson2801](https://discourse.nodered.org/u/hederson2801)\
**Post date:** [26 January 2021 16:18 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/8 "2021-01-26T16:18:00Z")

</div>

My friends, in the browser on the computer or raspian the application works very well. But on TV the time is 12/31/1969 10:58 PM. My TV is samsung with samsung browser. The TV date is correct.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 January 2021 20:18 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/9 "2021-01-26T20:18:12Z")

</div>

Please don't ask the same question in two threads. Since you have opened a [new thread](https://discourse.nodered.org/t/set-a-time-in-the-title-bar/39819) and this thread was originally opened two years ago, I'll close this thread.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [26 January 2021 20:18 UTC](https://discourse.nodered.org/t/logo-in-ui-title-bar-on-aws-server/8873/10 "2021-01-26T20:18:16Z")

</div>