# How to add my png to the Node-RED Dashboard?

**URL:** <https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [30 October 2025 06:43 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538 "2025-10-30T06:43:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [30 October 2025 06:43 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/1 "2025-10-30T06:43:57Z")

</div>

Hi everyone,

I’d like to add my own **logo.png** to the Dashboard.  
I’ve read that it can be done using a **ui\_template** , but I’m not sure about the right procedure.  
If anyone has some **tips or ideas** , I’m interested!

Thanks!

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [30 October 2025 09:06 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/2 "2025-10-30T09:06:47Z")

</div>

Best would be to define (in **settings.js** ) a static web root, where you can place your png, and then include it in your template, e.g.

```auto
<img src="/my_root/image.png" alt="Description of image" width="300" height="200">

```

---

<div class="post-metadata">

**Author:** ![karlgotbread](https://avatars.discourse-cdn.com/v4/letter/k/e480ec/32.png) [@karlgotbread](https://discourse.nodered.org/u/karlgotbread)\
**Post date:** [30 October 2025 10:51 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/3 "2025-10-30T10:51:52Z")

</div>

I mean not changing the Node-RED dashboard logo, but adding images (in PNG format) to my dashboard interface.

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [30 October 2025 11:07 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/4 "2025-10-30T11:07:12Z")

</div>

Have you tried any of the methods that people have posted in the forum?

What results do you get?

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [30 October 2025 21:37 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/5 "2025-10-30T21:37:57Z")

</div>

> [@karlgotbread](#):
>
> I mean not changing the Node-RED dashboard logo, but adding images (in PNG format) to my dashboard interface.

This is what I meant too. to show an image in a template node, you need to load it from somewhere. Either from a public site (but then you depend on external access), or define (in **settings.js** ) a static web root on the Node-red server, and load your resources (e.g. images, icons etc.) from there.  
If you wish, you can also send your template the binary data of the image (as binary or base64) and create a dynamic image from it in your template.

---

<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:** [29 November 2025 21:38 UTC](https://discourse.nodered.org/t/how-to-add-my-png-to-the-node-red-dashboard/99538/6 "2025-11-29T21:38:14Z")

</div>

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