Site - Identidade Visual no Site (Header, Favicon e Compartilhamento)

O que é

Esta página é o complemento prático do artigo principal Identidade Visual. Aqui o foco é entender onde no site público a sua logo aparece e como ela é reaproveitada em três pontos distintos da experiência da marca: o cabeçalho do site, o ícone da aba do navegador (favicon) e a imagem que aparece quando alguém compartilha um link do seu site no WhatsApp ou em redes sociais (og:image).

O cadastro em si é feito em "/admin/identidade", no card Logo. Este artigo explica o efeito visual de cada upload para que você decida quando basta uma única logo e quando vale a pena enviar variações específicas (logo de modo escuro, favicon próprio).

Como usar

1. Vá em Vitrine > Identidade Visual no menu lateral.
2. No card Logo, envie a Logo Principal pelo componente de upload (coluna esquerda). Essa é a imagem que o site usa por padrão em todos os lugares.
3. Se a sua logo perde leitura em fundos escuros, envie também a Logo (Modo Escuro) na coluna direita. Quando o visitante usa o site no modo escuro, esta versão é exibida no lugar.
4. Ajuste o tamanho e o estilo no card Exibição da Logo no Menu:
   • Tamanho da Logo - slider de 40 a 140 pixels, com 80px de referência.
   • Logo Estendida - só aparece quando o tamanho passa de 80px; faz a logo extrapolar a altura do cabeçalho.
   • Espaçamento Interno - padding de 0 a 24 pixels entre a logo e a borda do contêiner.
   • Fundo da Logo - adiciona uma caixa colorida atrás da logo, útil quando a logo é clara e o cabeçalho usa a opção gradiente.
   • Formato do Fundo - Auto, Arredondado, Circular ou Quadrado.
5. Confira no Preview do Navbar (bloco superior do card de exibição) como a logo fica junto das cores e dos itens de menu reais da sua empresa.
6. Salve clicando em Salvar no rodapé do formulário.

Casos especiais

Favicon personalizado

O sistema aceita um campo favicon separado da logo principal. Quando você não envia um favicon próprio, o componente tenant-favicon usa a Logo Principal automaticamente como ícone da aba do navegador, nos tamanhos 16x16 e 32x32. Para forçar um ícone diferente - útil quando a logo é muito horizontal e fica ilegível em 16 pixels - cadastre uma imagem quadrada simplificada no campo de favicon e ela substituirá a logo na aba.

Imagem de compartilhamento (og:image)

Não existe um upload separado de "imagem de compartilhamento". O site público monta o og:image automaticamente a partir da Logo Principal, passando por uma rota proxy interna (/og-image) que entrega a imagem como JPEG 1200x630 - formato compatível com os crawlers do WhatsApp, Facebook e Twitter, mesmo se o arquivo original for WebP. Por isso, uma logo limpa e centralizada tende a render melhor na pré-visualização de links do que uma logo muito horizontal com texto fino.

Sem logo cadastrada

Se você nunca enviou logo, o cabeçalho do site exibe no lugar dela o Nome do Site configurado no primeiro card da página (campo nome_site). É um fallback funcional, mas perde força de marca. Cadastrar a logo é o primeiro passo recomendado.

Logo Principal versus Logo Escuro

O Modo Escuro só troca a imagem do cabeçalho. O favicon e a imagem de compartilhamento sempre vêm da Logo Principal, independentemente do tema do visitante.

Erros comuns e como resolver

• A logo aparece cortada no cabeçalho - Causa: tamanho configurado alto demais sem ativar Logo Estendida. Solução: ative Logo Estendida no card de exibição ou reduza o slider de tamanho.
• A logo some quando o visitante ativa o modo escuro - Causa: logo principal usa preto sólido sem variação escura. Solução: envie uma versão clara no campo Logo (Modo Escuro).
• Link compartilhado no WhatsApp não mostra a imagem - Causa: logo cadastrada em formato muito horizontal ou hospedada em URL externa fora da sua empresa. Solução: envie uma logo quadrada como Logo Principal; o proxy interno só recorta automaticamente arquivos servidos pelo /tenancy/assets/.
• Favicon continua o antigo após trocar a logo - Causa: cache do navegador do visitante. Solução: peça para limpar cache ou abrir em aba anônima. O servidor já entrega o arquivo novo.
• "Identidade visual salva com sucesso!" não aparece - Causa: campo obrigatório Nome exibido no site e painel ficou vazio. Solução: preencha o Nome do Site no primeiro card e salve de novo.

Onde encontrar

• URL: /admin/identidade
• Caminho no menu: Vitrine > Identidade Visual
• Permissão necessária: ver as configurações para ver, editar as configurações para salvar
• Módulo necessário: nenhum

Veja também

• Identidade Visual - artigo principal com o passo a passo completo de logo, hero, redes sociais e QR Code
• Personalizacao do Site - visão geral de todos os pontos de customização do site
• Cores e Aparência - cores que ficam atrás da logo no cabeçalho gradiente
• Hero Slides (Carrossel) - banner principal logo abaixo do cabeçalho com a logo