Configurar logos (header, login, admin)
a evob usa 4 logos diferentes em contextos distintos — saber onde cada um aparece evita logo distorcido, branco-em-branco e quebra visual.
# Configurar logos (header, login, admin)
⏱️ 5 min de leitura · 🏷️ Plataforma · 👤 Admin de Plataforma · 🆓 Todos os planos
Em 1 frase: a evob usa 4 logos diferentes em contextos distintos — saber onde cada um aparece evita logo distorcido, branco-em-branco e quebra visual.
Os 4 logos da plataforma
Cada um tem proporção e fundo recomendados diferentes. Evite usar o mesmo arquivo em todos.
1. Logo principal (header)
Onde aparece:- Header do AVA (área do aluno)
- Header do admin
- Topo dos emails transacionais
- Compartilhamento social (preview de OG)
- Formato: PNG transparente (preferível) ou SVG
- Proporção: 4:1 horizontal (ex: 512×128px)
- Tamanho: até 1 MB
- Cor: deve funcionar em fundo branco
- Margem interna: respeite ~10% de "ar" em volta
💡 Logo com letras escuras + ícone colorido funciona melhor que "tudo da cor da marca", porque o header pode ter background branco.
2. Logo escuro
Onde aparece:- Modo escuro do AVA (se o aluno ativar)
- Algumas seções administrativas
- Emails com tema dark
- Mesma proporção do principal
- Cor: deve funcionar em fundo escuro
- Geralmente é a versão "branca" ou "clara" do logo
💡 Se sua marca já tem logo branco, use ele aqui. Se não tem, peça para o designer fazer uma versão clara.
3. Logo de login
Onde aparece:- Tela de login do aluno (entrar no AVA)
- Tela de login do admin (acesso da equipe)
- Tela de "esqueci senha"
- Formato: PNG transparente ou SVG
- Proporção: quadrado (1:1) — ex: 256×256px
- Tamanho: até 500 KB
- Cor: funciona melhor com fundo neutro
💡 A tela de login costuma ter fundo claro com gradiente leve. Logo escuro + colorido é o ideal.
4. Favicon
Onde aparece:- Aba do navegador (junto do título)
- Favoritos/bookmarks
- Tela inicial do iOS/Android (se aluno "salvar como app")
- Formato: PNG (preferível) ou ICO
- Tamanho: 64×64px ou 128×128px (a evob redimensiona)
- Quadrado, sem padding interno (geralmente é só o ícone da marca, sem texto)
💡 Favicon é onde aparece o ícone, não a logo completa. Use o símbolo principal (sem o nome da marca).
Como subir cada um
- Vá em Plataforma > Marca > Identidade Visual
- Para cada slot, clique em Subir imagem
- Selecione o arquivo
- Clique em Pré-visualizar para ver em diferentes contextos
- Salve
Boas práticas
✅ Faça
- Use PNG transparente (não JPG — fundo branco vaza em algumas seções)
- Mantenha margem interna (não cole o logo na borda)
- Teste em fundo claro E escuro antes de salvar
- Use mesma família tipográfica entre os 4 logos para consistência
- Mantenha arquivo final ≤ 200 KB se possível (carregamento mais rápido)
❌ Não faça
- ❌ Subir JPG com fundo branco (vai aparecer "caixinha branca" em fundos coloridos)
- ❌ Logo com sombra/relevo pesados (não escala bem)
- ❌ Logo em alta resolução demais (10000×3000px) — o navegador renderiza pequeno e gasta banda
- ❌ Usar o logo do header como favicon (texto fica ilegível em 16×16)
- ❌ Esquecer da versão escura (mesmo que ainda não vá usar dark mode)
Pré-visualização
A tela de preview mostra:
- Header do AVA (com logo principal)
- Header do admin
- Tela de login (com logo de login)
- Email transacional (com logo principal e logo escuro)
- Aba do browser (com favicon)
💡 Dica: abra também o site real em navegador anônimo depois de salvar, para garantir que o cache não esteja servindo logo antigo.
Multi-loja: logos diferentes por loja
Se você tem multi-loja, cada loja pode ter logo próprio:
- Plataforma: logo da holding
- Loja A: logo da escola A
- Loja B: logo da escola B
Configure em Loja > Configurações > Identidade.
💡 Aluno vê o logo da Loja, não da plataforma — a plataforma é "invisível" do ponto de vista comercial.
Quando trocar o logo
Atualizou a marca? Subiu logo novo:
- Suba o novo PNG na configuração
- Aguarde até 5 minutos — alguns caches podem servir o antigo
- Teste em navegador anônimo
- Se ainda mostrar antigo, force refresh: `Ctrl+Shift+R` (Windows) / `Cmd+Shift+R` (Mac)
💡 Não há histórico de logos — quando você sobe novo, o anterior é substituído. Faça backup do antigo antes.
Exportando logo do Figma/Canva
Se você tem o logo no Figma:
- Selecione o frame com o logo
- Painel direito → Export → PNG
- 2x para retina (subir versão @2x para reservar qualidade)
- Trim Whitespace para remover bordas
No Canva:
- Selecione o design do logo
- Compartilhar → Baixar → tipo PNG
- Marque "Fundo transparente" (precisa de Canva Pro)
- Resolução: 1080p (a evob redimensiona)
Erros comuns
"Logo aparece esticado"
Você subiu fora da proporção. Header espera 4:1; favicon e login esperam 1:1.
"Caixinha branca em volta do logo"
Você subiu JPG. Troque por PNG transparente.
"Logo borrado"
Resolução baixa (ex: 100×30px). Suba pelo menos 2x o tamanho de exibição (header geralmente é exibido em 32px de altura → suba 256px ou mais).
"Cores diferentes do esperado"
Perfil de cor errado. PNG deve estar em sRGB. Reexporte do Figma/Photoshop com perfil sRGB.
"Logo aparece preto e branco no email"
Alguns clientes de email (Outlook 2007/2010) renderizam mal PNGs com transparência. Mantenha o logo legível mesmo em fundo branco/cinza.
Próximos passos
- 📖 Banner da página de login (em produção)
- 📖 Logo da loja (em produção)
Foi útil este artigo? 👍 👎 Falar com CS (em produção) · Pergunte ao Vob 🤖 (em produção) Última atualização: 2026-05-01