Todo logo precisa de duas versões que a maioria das empresas pequenas não tem: uma para fundo escuro e um ícone quadrado. A primeira aparece no modo escuro do celular, no rodapé do site, na camiseta preta e no vídeo. O segundo aparece no perfil do Instagram e do WhatsApp, na aba do navegador e na tela inicial do celular quando alguém salva o seu site. Sem elas, o logo some no fundo preto e vira uma mancha ilegível no círculo de perfil.
As duas se derivam do logo que você já tem, sem redesenhar. O que precisa é de decisão e do arquivo em vetor.
Por que o logo colorido não funciona em fundo escuro?
Porque ele foi desenhado para fundo branco. Um logo azul-escuro sobre preto desaparece. Um logo com texto cinza sobre fundo cinza-escuro fica ilegível. E um logo colorido com fundo branco quadrado colado sobre o fundo escuro parece adesivo mal recortado, que é o que a maioria faz por falta de versão certa.
A versão para fundo escuro é, quase sempre, o logo inteiro em branco, ou em branco com a cor principal mantida só no símbolo. Regra: se a cor principal é clara (amarelo, laranja, verde-claro), ela pode ficar; se é escura (azul-marinho, vinho, preto), vira branco.
Como montar a versão para fundo escuro
- Abra o logo em vetor (SVG ou arquivo original). Se só existe em JPG ou PNG, pare aqui e resolva isso primeiro; o guia https://avilaops.com/guias/cor-fonte-e-logo-num-arquivo-so/ explica.
- Duplique o arquivo. Na cópia, troque todas as cores escuras por branco. Mantenha a cor principal só se ela continuar legível sobre preto.
- Teste em três fundos: preto, cinza-escuro e a sua cor principal em tom fechado. Se em algum deles alguma parte some, ajuste.
- Exporte em SVG e em PNG com fundo transparente. Sem fundo transparente, a versão branca vira um retângulo branco sobre o escuro, e é o mesmo problema do adesivo.
- Guarde na pasta da marca como "logo-fundo-escuro".
Se o logo tem detalhes finos (linhas de contorno, texto pequeno), eles somem em branco sobre preto mais do que em preto sobre branco. Engrosse um pouco ou simplifique na versão escura.
Como montar o ícone quadrado
O ícone não é o logo diminuído. É o símbolo do logo, ou a inicial, num quadrado com a cor da marca:
Deslize a tabela para os lados para ver todas as colunas.
| Onde aparece | Tamanho | O que funciona |
|---|---|---|
| Perfil do Instagram e do WhatsApp | Círculo recortado de um quadrado; use 1000 por 1000 pixels | Símbolo ou inicial centralizado, com margem de 20% em cada lado para não cortar no círculo |
| Favicon (aba do navegador) | 32 por 32 pixels | O mesmo símbolo, sem detalhe fino. Se tiver texto, apaga. |
| Tela inicial do celular (site salvo) | 180 por 180 (iPhone) e 512 por 512 (Android) | Símbolo sobre fundo na cor da marca, sem transparência, cantos retos (o sistema arredonda) |
| Aplicativo, se um dia existir | 1024 por 1024 pixels | Mesmo desenho, exportado do vetor |
Se o logo é só o nome escrito, sem símbolo, o ícone é a primeira letra na fonte do logo, sobre a cor da marca. Nunca o nome inteiro apertado: em 32 pixels, "Casa Flor" vira um traço.
Uma vez montado, o ícone é o mesmo em todos os lugares. Por que o favicon importa e quais arquivos o site precisa está em https://avilaops.com/guias/o-que-e-favicon-icone-da-aba/.
Exemplo: uma clínica tem logo com uma folha verde e o nome em cinza-escuro. Versão para fundo escuro: folha verde mantida, nome em branco. Ícone: só a folha, centralizada num quadrado verde-escuro, com a folha em verde-claro. O mesmo arquivo vai para o perfil do Instagram, o WhatsApp, o favicon e a tela do celular. Quem vê a folha sabe que é a clínica.
O que fazer agora
Abra o seu site no celular em modo escuro e olhe o logo. Depois abra o perfil do WhatsApp e veja se dá para ler o que está no círculo. Se um dos dois falhou, você precisa das duas versões. Sua marca igual no Instagram, no site, na nota e no fundo escuro: https://avilaops.com/identidade-visual/ ou chame no WhatsApp: https://wa.me/5517997811471.
Perguntas frequentes
Posso usar o logo inteiro como foto de perfil? Se o logo for só um símbolo, pode. Se tiver nome, não: o círculo corta as pontas e o texto fica minúsculo. Use o símbolo ou a inicial, com margem.
A versão em branco muda a minha marca? Não. É a mesma marca em outro fundo. O que muda a marca é usar cores e formas diferentes a cada lugar.
Quem faz isso, eu ou um designer? Se você tem o vetor e sabe usar um editor de vetor, faz em uma hora. Se não, um designer faz as duas versões em poucas horas. O que não vale é fazer em editor de foto a partir de um print.
