Como trocar o logotipo do site

Identidade Visual Leitura de 4 min

O logotipo é a cara da sua marca no site. Ele aparece no topo de todas as páginas, então mantê-lo atualizado e no tamanho certo faz diferença na primeira impressão de quem visita. Neste tutorial, você vai aprender a trocar o logotipo do seu site e a ajustar como ele aparece no computador e no celular.

Onde fica o logotipo

A opção de logotipo fica no grupo Criador de Site, no menu à esquerda. É o primeiro item da lista. Ao clicar em Logotipo, você vê o logo atual do seu site e algumas informações sobre ele.

Tela do logotipo no Criador de Sites Malvis, mostrando o logo atual, o nome do arquivo, o texto alternativo e as larguras de exibição
A tela do logotipo, com o logo atual e as informações de exibição.

Nessa tela você já enxerga tudo o que está configurado hoje: o nome do arquivo do logo, o texto alternativo (a descrição usada pelo Google) e as três larguras de exibição, que definem o tamanho do logo no computador, ao rolar a página e no celular.

Passo a passo pra trocar o logotipo

1

Abra a opção Logotipo

No menu à esquerda, abra o grupo Criador de Site e clique em Logotipo.

2

Clique em Editar

Na tela do logotipo, clique no botão Editar, que fica logo abaixo das informações. Isso abre a tela de atualização do logo.

Tela de atualização do logotipo, com a área de envio da imagem, os campos de largura e o texto alternativo
A tela de atualização, onde você envia o novo logo e ajusta os tamanhos.
3

Envie o novo logotipo

Clique na área escrita Clique aqui para Enviar a Imagem e escolha o arquivo do seu logo no computador. O ideal é usar um logotipo com fundo transparente, pra ele ficar bonito sobre qualquer cor de fundo. Antes de enviar, confira a medida recomendada:

500pxLargura
130pxAltura
PNG ou WEBPFormato, fundo transparente

Manter esse tamanho garante que o logo fique nítido e bem proporcionado no topo do site.

4

Ajuste as larguras de exibição

Logo abaixo, você define o tamanho máximo que o logo vai ter em cada situação. São três campos:

  1. Largura na versão computador, no topo da página. É o tamanho do logo quando a pessoa abre o site no computador. No exemplo, está em 240 pixels.
  2. Largura na versão computador, quando rola pra baixo. Muitos sites diminuem o logo quando a pessoa rola a página. Esse campo controla esse tamanho menor. No exemplo, 150 pixels.
  3. Largura na versão smartphones. É o tamanho do logo no celular. No exemplo, 200 pixels.

Você pode ir testando os valores até o logo ficar do jeito que você quer, em cada tela.

5

Preencha o texto alternativo (ALT)

O texto alternativo é uma descrição do logo que o Google e os leitores de tela usam pra entender a imagem. Ele é importante pro SEO do seu site. Coloque algo que descreva a sua empresa, como o nome e a atividade. Se você deixar esse campo vazio, o sistema usa o nome do site.

6

Salve

Por último, clique em Salvar. Pronto, o novo logotipo já passa a aparecer no seu site.

Dica de SEO: uma boa descrição de logo costuma incluir o nome da empresa e o que ela faz. Por exemplo: Agência Malvis, criação de sites profissionais e marketing digital. Isso ajuda o Google a entender do que se trata a sua marca.

Perguntas frequentes

Qual o melhor formato de imagem pro logotipo?
O ideal é WEBP ou PNG com fundo transparente. O fundo transparente faz o logo ficar bem sobre qualquer cor, sem aquele retângulo branco atrás. O tamanho recomendado é 500 pixels de largura por 130 de altura.
Por que o logo diminui quando eu rolo a página?
Muitos sites deixam o topo fixo e reduzem um pouco o logo quando a pessoa rola pra baixo, pra ocupar menos espaço. É por isso que existe o campo de largura para quando a página rola. Você controla esse tamanho menor ali.
O que eu coloco no texto alternativo?
Coloque o nome da sua empresa e a atividade dela, de forma curta. Ele serve pro Google e pros leitores de tela entenderem a imagem, e ajuda no SEO. Se ficar vazio, o sistema usa o nome do site.
Meu logo ficou grande ou pequeno demais. Como ajusto?
É só voltar em Editar e mexer nos campos de largura. Cada um controla uma situação: computador no topo, computador ao rolar e celular. Ajuste os números e salve até ficar do jeito certo.
Preciso enviar logos diferentes pra computador e celular?
Não. Você envia um único arquivo de logo. O que muda entre computador e celular são apenas as larguras de exibição, que você ajusta nos campos.

Ficou com alguma dúvida?

Se você travou em algum ponto ou precisa de uma mãozinha, o nosso suporte está pronto pra te ajudar no WhatsApp.

Falar com o Suporte