How can I customize login page?

For Grafana v8 I’ve been able to change the favicon, title, logo, logo-wordmark (“Welcome to Grafana” message in v8) and footer. I’m reusing the image provided by @mohit3 as a visual aid. The image is of an older Grafana version (v6), but it’s similar enough to the current version.

To change the favicon:

  1. Go to /usr/share/grafana/public/img/
  2. Name the .png you want to be your favicon “fav32.png” and effectively replace Grafana’s fav32.png in the directory

To change the title:

  1. Go to /usr/share/grafana/public/views/
  2. Open index.html with an editor
  3. Replace <title>[[.AppTitle]]</title> with <title>YOUR_TITLE</title>

To change the logo:

  1. Go to /usr/share/grafana/public/img/
  2. Name the .svg you want to be your logo “grafana_icon.svg” and effectively replace Grafana’s grafana_icon.svg in the directory

To change the logo-wordmark (“Welcome to Grafana”):

  1. Go to /usr/share/grafana/public/build/
  2. Open 8966.***.js with an editor (Might be a different .js file in your case. I’m guessing it will be the .js file with the largest number starting with 8)
  3. Search for “Welcome to Grafana” to find the line of code to edit
  4. Replace the parts marked in bold o(l,“AppTitle”,“Grafana”),o(l,“LoginTitle”,“Welcome to Grafana”) with o(l,“AppTitle”,“YOUR_TITLE”),o(l,“LoginTitle”,“Welcome to YOUR_COMPANY_NAME”)

To change/ hide the footer:

  1. Go to /usr/share/grafana/public/build/
  2. Open 8966.***.js with an editor (Might be a different .js file in your case. I’m guessing it will be the .js file with the largest number starting with 8)
  3. Search for “Community” to find the line of code to edit
  4. Replace or comment out the parts I’ve marked in bold:
    let o=()=>[{text:"Documentation",icon:"document-info",url:"https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer",target:"_blank"},{text:"Support",icon:"question-circle",url:"https://grafana.com/products/enterprise/?utm_source=grafana_footer",target:"_blank"},{text:"Community",icon:"comments-alt",url:"https://community.grafana.com/?utm_source=grafana_footer",target:"_blank"}],l=()=>{const{buildInfo:e,licenseInfo:t}=n.ZP,s=,a=t.stateInfo? (${t.stateInfo}):“”;return s.push({text:${e.edition}${a},url:t.licenseUrl}),e.hideVersion||(s.push({text:v${e.version} (${e.commit})}),e.hasUpdate&&s.push({text:"New version available!",icon:"download-alt",url:"https://grafana.com/grafana/download?utm_source=grafana_footer",target:"_blank"})),s};
5 Likes