How to change title of website grafana

That’s an important question. Does anyone know an answer? I would like to use Grafana as monitoring software for our company. It would be great to deposit our own name and logo.
Thanks!

Hi,

I’m using v5.2.4. Any solution for the same issue? I have set window_title_prefix:"Grafana - " but its not working.

version 5.2.4 any solution?

we can change.
http://docs.grafana.org/project/building_from_source/

Hi,
You can change grafana logo by the way: Replace file /usr/share/grafana/public/img/grafana_icon.svg by your logo when you install grafana by apt.
If you install grafana from source, please find file grafana_icon.svg.
Good luck :smiley:

1 Like

Hi
I changed the file usr/share/grafana/public/img/grafana_icon.svg but the image has not changed

Have you forced a full refresh in your browser? Possibly Ctrl-F5 but may depend on browser/OS. It can be quite difficult sometimes to persuade a browser to fetch the latest version.

1 Like

Hi
thank.
everything worked out

Hi,
Looking through the source I found
public/app/features/dashboard/containers/DashboardPage.tsx

if (!prevProps.dashboard) {
document.title = dashboard.title + ’ - Grafana’;

Change the ‘- Grafana’ value and the title will be your custom title.

There is also the public/app/core/config.ts -> windowTitlePrefix: 'Grafana - ', but that does not change it everywhere.

Every version of Grafana will be diffirence. So I’m not sure.

Could you Refresh browser? Ctrl + F5

Hello,
I tried changing the file but it said permission denied or no such file. What is the command line for changing or replacing the grafana_icon.svg on ubuntu installed using dpkg?
Thank you
Regards.

About changing the title:

First of all, thanks everyone for their contributing!

I use v6.3.5 (I just started recently)

  • I have searched at every file that contains “Grafana” and change it wherever I think it should=> I was unable to resolve the problem.

  • Also searched for every file that contains “windowTitle” and found them only at Grafana\public\build (app.75ccb77dbb4b5e3c9285 ).

    There, I have replaced at windowTitlePrefix: 'grafana - ’ the word Grafana for my word (in both javascript and map).=> I have no luck.

  • I have tried inserting my word even at windowTitlePrefix = ‘’ => there is still -Grafana in my navtab :frowning: (except on the login page)

Does anyone have a new idea?

Thanks in advance.

Hi,

Version 6.4.3 here.

I managed to replace the “- Grafana” part that appears after login but I am still stuck with the “Grafana” title tab at login. I tried your suggestions but it did not work. Have you changed something else ?

Otherwise,I would suggest you to try searching for patterns like " - Grafana" and look for a ternary condition. Then just replace with the text of your choice. This should do the work.

Hi,

Tested on version 6.5.2:

change in public/views/index.html the title tag
change in public/build/app.****.js the var e=t.getPageTitle;document.title=e?e+" - Grafana":“Grafana”

For version 6.62:

change in public/views/index.html the title tag
change in public/build/app..js the var e=t.getPageTitle;document.title=e?e+" - Grafana":“Grafana”
also change in public/build/DashboardPage.
.js replace (document.title=r.title+" - Grafana")

Of course you can, it’s just an image and can be simply replace it in the directory.

My Grafana is 6.7.2 version.
help please

For everyone seeking answers , here is my solution for the same from the scratch
Hope that answers everything !
Customizing complete login screen step by step

IMPORTANT POINT:

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — Location /usr/share/grafana/public/img contains all the images including our {Favicon , grafana logo , background image,grafana-logo-wordmark} by the names {fav32.png , grafana_icon.svg , heatmap_bg_test.svg,grafana_typelogo.svg } respectively. You can directly drop your own images here and make the login page look yours. But I got a no. of complaints from the users that the changes took place properly in their localhost /server but when a remote user tried to access the same Grafana page, they can’t see these changes happening. So to avoid these bugs follow me in this blog . — — — — — — — — — — — — — — — — — — — — —

HERE WE GO STEP BY STEP :

  1. First save all your images (Favicon , grafana logo , background image, Logo wordmark ) at a remote location in the cloud , in my case I am saving it on AWS S3 and being public ally accessible .
  2. Once I saved it on AWS S3 , all my images will generate a unique url to access it anywhere on the internet , please keep all those urls handy .
  3. Changing Favicon and Title :

Go to /usr/share/grafana/public/views/index.html and search for and for favicon

Change title by replacing [[.AppTitle]] and Paste your Favicon public url , in my case its aws s3 public url which I pasted here in place of [[.Favicon]] and after the change it looks like

Replaced Title by our company name and replcaed favicon by our favicon public url, In our case its aws s3 public url

So by now our Favicon and Title is successfully changed.

  1. Changing Grafana-Logo and Background image :

Go to /usr/share/grafana/public/build/ and search for the file app.****.js

ls|grep app.****.js

and then search for the keyword “heatmap_bg_test.svg” and “grafana_icon.svg” in this file, whatever places you find this keyword in the file replace the complete “src” & “url” with your own “public url” of your background image and the grafana_icon. The file looks quite messy if you open it with vim editor !

grafana_icon.svg might be at several places in this file , dont forget to replace your url at every place

  1. Changing Grafana-Logo-Wordmark :

Go to /usr/share/grafana/public/build/ and search for the file grafana.dark.****.css

ls|grep grafana.dark.****.css

and then search for the keyword “grafana_typelogo.svg” and replace the complete url by your own aws s3 logo word mark url ! Then restart your docker /server and kaboom ! The customized results looks awesome!

Grafana login screen looks like ours ! Favicon , title , logos , background everything changes and customized just like the way we want !

BONUS CUSTOMIZATION :

If you want to change the title in every screen , after you login to Grafana as well. Then go to /usr/share/grafana/public/build/DashboardPage.****.js and search for the keyword “document.title” and then change it like this document.title=r.title+” — ”.

Hope you liked this blog ! Follow me on this Grafana series to explore more about the service and if you are unaware about my last two blogs in this series then here are the links ! FYI , the next blog in the series will be on “AuthProxy” so stay tuned for that and many more awesome blogs !

3 Likes

1.change in /usr/share/grafana/public/build/app.898fe9e20a782b4232fe.js

2.search AppTitle

find and change
c.AppTitle=“Grafana”
to
c.AppTitle=“whatever you want”

{var t=e.className;return a.a.createElement(“img”,{className:t,src:“public/img/grafana_icon.svg”,alt:“Grafana”})},c.AppTitle=“Grafana”},

{var t=e.className;return a.a.createElement(“img”,{className:t,src:“public/img/grafana_icon.svg”,alt:“Grafana”})},c.AppTitle=“客制化0511”,

1 Like