Tamanho de logo para sites, redes sociais e impressão

Não existe um único tamanho de logo que funcione em todo lugar. Guarde seu logo como um vetor mestre, um SVG ou PDF, que escala para qualquer tamanho sem borrar, e exporte a partir dele para cada destino: um SVG dimensionado pela altura no cabeçalho do site, uma versão quadrada para fotos de perfil, uma versão horizontal para banners e um arquivo a 300 dpi para impressão. O que muda de um lugar para outro é a tela e quanto dela o logo deve ocupar.

Comece por um arquivo mestre, não por um tamanho

Arquivos vetoriais descrevem formas em vez de pixels, então o mesmo arquivo fica nítido no celular e na fachada de uma loja. Todos os outros arquivos devem ser exportados desse mestre, nunca de um print ou de um PNG antigo. Se você só tem um logo raster pequeno, mande redesenhar em vetor antes de qualquer outra coisa; isso vai poupar dor de cabeça em todos os trabalhos seguintes.

Tamanho de logo para site

Num site, dimensione o logo pela altura, não pela largura, para que um logotipo largo e um símbolo compacto fiquem na mesma linha de base no cabeçalho. Use o SVG para que ele fique nítido em telas de alta densidade e dê a ele uma largura máxima sensata para celulares pequenos.

<a class="logo" href="/">
  <img src="/logo.svg" alt="Fern Studio" width="120" height="32">
</a>

<style>
  .logo img {
    height: 32px;   /* set by height */
    width: auto;
    max-width: 40vw; /* never crowds a small phone */
  }
  @media (min-width: 768px) {
    .logo img { height: 40px; }
  }
</style>

O favicon é um arquivo à parte, quadrado e simplificado, não o logo completo encolhido. Os navegadores o mostram em tamanhos muito pequenos, então ele costuma virar uma única letra ou um símbolo. Design de favicon lista os arquivos exatos, e as diretrizes de favicon do Google pedem um ícone quadrado em múltiplos de 48 pixels.

Tamanho de logo para redes sociais

As redes sociais usam seu logo em dois lugares bem diferentes: a pequena foto de perfil e a capa ou banner largo. Eles pedem versões diferentes do logo, não o mesmo arquivo espremido.

Fotos de perfil

• Envie uma imagem quadrada. A maioria das plataformas corta a foto de perfil em círculo, então os cantos somem.
• Use a versão ícone ou empilhada, não uma assinatura horizontal comprida. Um logotipo largo fica ilegível num círculo pequeno.
• Mantenha o logo dentro de mais ou menos dois terços centrais do quadrado, com espaço igual em volta.
• Coloque-o sobre uma cor sólida ou um fundo calmo que preencha o quadrado, para que o círculo pareça intencional.
• Confira no tamanho real no seu próprio celular antes de trocar em todos os lugares.

Capas e banners

Imagens de capa são largas e cortadas de formas diferentes no celular e no computador, e a foto de perfil muitas vezes cobre um dos cantos. Mantenha o logo e o texto perto do centro e deixe o fundo ir até as bordas.

Nos posts, o logo é uma assinatura, não a manchete. Um bom ponto de partida é deixá-lo pequeno, sempre no mesmo canto e no mesmo tamanho em todos os posts, para criar reconhecimento sem disputar com a mensagem. Tamanhos de imagem para redes sociais traz todos os formatos de post.

Tamanhos de logo para e-mail e impressão

O e-mail é o caso chato: muitos apps de e-mail não exibem imagens SVG, então use um PNG transparente. Exporte com o dobro da largura que você quer exibir e defina a largura de exibição no HTML, para que ele fique nítido em telas de celular de alta densidade. Para impressão, leia resolução de imagem para impressão antes de mandar qualquer coisa para a gráfica, e veja design de assinatura de e-mail para a assinatura em si.

Todos os tamanhos a partir de um único design

A parte trabalhosa dos tamanhos de logo não é o logo, é refazer a capa, o post, o story e o cartão em volta dele toda vez. No Gradiently você pode pedir os outros tamanhos ao Designer, ou, com o Pro, redimensionar um design para todos os tamanhos de uma vez, e o fundo é renderizado de novo em cada formato em vez de ser cortado. Tamanhos personalizados vão de 200 a 8.000 pixels quando um fornecedor pede algo fora do comum. Variações de logo mostra qual versão do logo usar em cada um.