Logotipo no site profissional: formatos, tamanho e posição

Receber apenas uma imagem quadrada, com fundo branco e baixa resolução limita o projeto. Antes de publicar, organize versões coerentes da marca e escolha cada uma conforme o espaço disponível.

Tenha uma versão principal e alternativas

A marca pode precisar de composição horizontal para o cabeçalho, versão vertical para materiais amplos e símbolo reduzido para espaços pequenos. As alternativas devem preservar formas, cores e proporções, sem redesenhar a identidade a cada página.

Uma versão monocromática ajuda em fundos complexos ou situações de contraste limitado. Não crie variações aleatórias apenas para combinar com cada seção.

Prefira arquivo vetorial quando disponível

SVG costuma manter nitidez em diferentes tamanhos e pode ter peso reduzido quando bem preparado. Revise fontes convertidas, áreas invisíveis, metadados e elementos desnecessários antes de usar. Se o arquivo não puder ser publicado com segurança, exporte uma imagem adequada.

PNG com transparência é útil para versões rasterizadas. JPEG não preserva transparência e pode criar um retângulo ao redor da marca. Escolha formato conforme o fundo e a necessidade de qualidade.

Não use arquivo maior do que o necessário

Uma imagem com milhares de pixels exibida em poucos centímetros aumenta transferência sem melhorar a leitura. Exporte dimensões compatíveis, mantenha proporção e evite compressão que cria bordas borradas.

O guia de imagens para site profissional ajuda a revisar peso e preparação.

Preserve a área de respiro

Não encoste texto, menu ou borda no símbolo. A área livre permite reconhecer a forma e evita que a marca pareça parte de outro elemento. Use uma regra consistente no cabeçalho, rodapé e materiais de campanha.

Garanta contraste com o fundo

Uma versão escura pode desaparecer sobre foto ou cor intensa. Use versão clara, fundo de apoio ou ajuste a seção. Não aplique sombra forte, contorno improvisado ou caixa branca quando existe uma variação oficial adequada.

Defina tamanho pela legibilidade

O logotipo precisa ser reconhecível sem dominar a navegação. Marcas com texto muito fino ou assinatura extensa podem exigir uma versão simplificada no celular. Não aumente toda a barra apenas para manter detalhes que não sobrevivem ao tamanho reduzido.

Teste no cabeçalho móvel

Abra menu, role a página e altere o tamanho da fonte do sistema. Confirme que a marca não empurra botões, não fica cortada e não perde contraste em cabeçalho fixo. A versão móvel pode usar apenas símbolo quando o nome da empresa continua disponível de forma acessível.

Veja também o checklist de site responsivo no celular.

Faça o link voltar para o início

No cabeçalho, o logotipo geralmente leva à página inicial. Mantenha área clicável suficiente, foco visível e descrição acessível. Evite abrir nova aba para esse link interno.

Escreva um nome acessível

Quando a imagem representa a marca e funciona como link, o texto alternativo pode identificar a empresa ou o destino. Não repita palavras-chave nem descreva cores sem necessidade. Se o nome já aparece ao lado e seria duplicado, a implementação deve evitar leitura repetitiva.

Separe logotipo de favicon

O favicon aparece muito menor e precisa de símbolo simples. Reduzir uma assinatura completa costuma gerar um borrão. Prepare o ícone conforme o guia de favicon no site profissional.

Organize os arquivos de origem

Mantenha versões aprovadas, cores, fundos permitidos e responsáveis pelas mudanças. Nomes claros evitam publicar rascunho antigo. Se a empresa atualizar a identidade, revise cabeçalho, rodapé, prévias de link, e-mails e imagens sociais.

Checklist do logotipo no site

1. versão principal definida;
2. alternativas aprovadas;
3. vetor revisado;
4. imagem raster no tamanho certo;
5. respiro preservado;
6. contraste suficiente;
7. celular testado;
8. link para o início;
9. nome acessível;
10. favicon separado.

A marca precisa funcionar, não apenas aparecer

Uma aplicação consistente ajuda o visitante a reconhecer a empresa sem sacrificar navegação, velocidade ou leitura.