Grafana – Customização da Tela de Login

Home Blog
No Comment

🎥 Vídeo tutorial:
👉 CLIQUE AQUI PARA ASSISTIR: Customização Tela de Login do Grafana

Neste guia, você aprenderá como personalizar completamente a tela de login do Grafana, incluindo ícone da aba do navegador, logotipo, background, cores da tela e textos de título.
Todas as modificações foram testadas na versão Grafana v12.2.1.

Os arquivos fav32.png, grafana_icon.svg e g8_login_dark.svg já devem estar copiados no servidor antes de iniciar o procedimento.

🧩 Ícone da aba do navegador

O arquivo deve estar em formato PNG (32x32px).

Backup do ícone original:

cp /usr/share/grafana/public/img/fav32.png /usr/share/grafana/public/img/fav32.png.BKP

Substituir pelo novo ícone:

cp fav32.png /usr/share/grafana/public/img/fav32.png

🖼️ Logo principal

Localizar o arquivo de imagem da tela de login:

sudo find /usr/share/grafana/public -name "grafana_icon*.svg"

Arquivo a ser substituído:

/usr/share/grafana/public/build/static/img/grafana_icon.1e0deb6b.svg

Backup da logo original:

cp /usr/share/grafana/public/build/static/img/grafana_icon.1e0deb6b.svg /usr/share/grafana/public/build/static/img/grafana_icon.1e0deb6b.svg.BKP

Substituir pelo logo da sua empresa:

cp grafana_icon.svg /usr/share/grafana/public/build/static/img/grafana_icon.1e0deb6b.svg

💡 Logo animado da tela de login

Este é o logo que “pula” enquanto a página carrega.

Arquivo a ser substituído:

/usr/share/grafana/public/img/grafana_icon.svg

Backup do arquivo original:

cp /usr/share/grafana/public/build/img/grafana_icon.svg /usr/share/grafana/public/build/img/grafana_icon.svg.BKP

Substituir pelo novo logo:

cp grafana_icon.svg /usr/share/grafana/public/img/grafana_icon.svg

🌆 Background da tela de login

Você pode usar backgrounds gratuitos em:
🔗 https://www.svgbackgrounds.com/

Localizar o arquivo de background:

sudo find /usr/share/grafana/public -name "g8_login_dark*.svg"

Arquivo a ser substituído:

/usr/share/grafana/public/build/static/img/g8_login_dark.571d84ac.svg

Backup do arquivo original:

cp /usr/share/grafana/public/build/static/img/g8_login_dark.571d84ac.svg /usr/share/grafana/public/build/static/img/g8_login_dark.571d84ac.svg.BKP

Substituir pelo background personalizado:

cp g8_login_dark.svg /usr/share/grafana/public/build/static/img/g8_login_dark.571d84ac.svg

🚫 Remover o rodapé (Footer)

Classe CSS do rodapé: .css-9ln5b6

Localizar o arquivo CSS:

sudo find /usr/share/grafana/ -name "grafana.dark*.css"

Editar o arquivo encontrado:

nano /usr/share/grafana/public/build/grafana.dark.23c5425b7a9e1580d499.css

Adicionar o código:

.login-page footer,
.login-page .css-9ln5b6 {
display: none !important;
visibility: hidden !important;
height: 0 !important;
}

🎨 Alterar cor da caixa de login

No mesmo arquivo CSS utilizado acima:

nano /usr/share/grafana/public/build/grafana.dark.23c5425b7a9e1580d499.css

Código:

.login-page {
background-color: #000000 !important; /* Fundo geral preto */
color: #000000 !important; /* Texto preto */
}
.login-page .login-content-box {
background-color: #ffffff !important; /* Fundo branco da caixa */
opacity: 1 !important;
border-radius: 10px;
}

✏️ Alterar títulos

Localizar o arquivo que contém o texto “Welcome to Grafana”:

sudo grep -R -l --include="*.js" "Welcome to Grafana" /usr/share/grafana/public


Backup dos arquivos:

cp /usr/share/grafana/public/build/9414.f776a554b2e64f6ceae0.js /usr/share/grafana/public/build/9414.f776a554b2e64f6ceae0.js.BKP

cp /usr/share/grafana/public/views/index.html /usr/share/grafana/public/views/index.html.bkp

Alterar o título da tela de login:

sed -i 's/\(this\.LoginTitle="\)[^"]*"/\1MOK Monitoramento Dashboards"/' /usr/share/grafana/public/build/9414.f776a554b2e64f6ceae0.js

Alterar o título da aba do navegador:

sed -i 's/\(this\.AppTitle="\)[^"]*"/\1MOK Monitoramento"/' /usr/share/grafana/public/build/9414.f776a554b2e64f6ceae0.js

Alterar o título da aba do navegador (pré-load):

sed -i 's|<title>\[\[\.AppTitle\]\]</title>|<title>MOK Monitoramento</title>|' /usr/share/grafana/public/views/index.html

✅ Conclusão

Após aplicar todas as modificações, reinicie o serviço do Grafana para que as alterações sejam carregadas:

sudo systemctl restart grafana-server

Sua tela de login agora estará totalmente personalizada com a identidade visual da sua empresa!