Tamanhos de logótipo para sites, redes sociais e impressão

Não há um único tamanho de logótipo que funcione em todo o lado. Guarda o teu logótipo como mestre vetorial, um SVG ou PDF, que se ajusta a qualquer tamanho sem desfocar, e exporta a partir dele para cada sítio onde vai: um SVG dimensionado pela altura para o cabeçalho do site, uma versão quadrada para fotografias de perfil, uma versão horizontal para banners e um ficheiro de 300 dpi para impressão. O que muda de sítio para sítio é a tela e quanto dela o logótipo deve ocupar.

Começa com um ficheiro mestre, não com um tamanho

Os ficheiros vetoriais descrevem formas e não píxeis, por isso o mesmo ficheiro fica nítido num telemóvel e numa fachada de loja. Todos os outros ficheiros que fizeres devem ser exportados deste mestre, nunca de uma captura de ecrã ou de um PNG antigo. Se só tens um logótipo raster pequeno, manda-o redesenhar como vetor antes de mais nada; poupa-te trabalho em todos os trabalhos seguintes.

Tamanho do logótipo num site

Num site, dimensiona o logótipo pela altura e não pela largura, para um logótipo tipográfico largo e um símbolo compacto ficarem na mesma linha de base no cabeçalho. Usa o SVG para ficar nítido em ecrãs de alta densidade e dá-lhe uma largura máxima sensata para telemóveis 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 teu favicon é um ficheiro à parte, quadrado e simplificado, não o logótipo completo reduzido. Os navegadores mostram-no em tamanhos muito pequenos, por isso costuma tornar-se uma só letra ou símbolo. Design de favicon lista os ficheiros exatos, e as diretrizes de favicon da Google pedem um ícone quadrado com um múltiplo de 48 píxeis.

Tamanho do logótipo para redes sociais

As plataformas sociais usam o teu logótipo em dois sítios muito diferentes: a pequena fotografia de perfil e a capa ou banner largo. Precisam de versões diferentes do logótipo, não do mesmo ficheiro espremido.

Fotografias de perfil

• Carrega uma imagem quadrada. A maioria das plataformas corta as fotografias de perfil em círculo, por isso os cantos desaparecem.
• Usa a versão de ícone ou empilhada, não uma composição horizontal comprida. Um logótipo tipográfico largo fica ilegível num círculo pequeno.
• Mantém o logótipo dentro de cerca dos dois terços centrais do quadrado, com espaço uniforme à volta.
• Põe-no sobre uma cor sólida ou um fundo calmo que encha o quadrado, para o círculo parecer deliberado.
• Verifica-o no tamanho real no teu próprio telemóvel antes de o mudares em todo o lado.

Capas e banners

As imagens de capa são largas e cortadas de forma diferente em telemóveis e computadores, e a fotografia de perfil sobrepõe-se muitas vezes a um canto. Mantém o logótipo e as palavras perto do centro e deixa o fundo estender-se até às margens.

Nas publicações, o logótipo é uma assinatura, não o título. Um bom ponto de partida é mantê-lo pequeno, num canto constante, com o mesmo tamanho em todas as publicações, para construir reconhecimento sem competir com a mensagem. Tamanhos de imagens para redes sociais tem todos os tamanhos de publicações.

Tamanhos de logótipo para email e impressão

O email é o caso incómodo: muitas apps de email não mostram imagens SVG, por isso usa um PNG transparente. Exporta-o com o dobro da largura em que queres que apareça e define depois a largura de apresentação no HTML, para ficar nítido em ecrãs de telemóvel de alta densidade. Para impressão, lê resolução de imagem para impressão antes de enviares algo a uma gráfica, e vê design de assinatura de email para a assinatura em si.

Como fazer todos os tamanhos a partir de um design

A parte maçadora dos tamanhos de logótipo não é o logótipo, é reconstruir a capa, a publicação, o story e o cartão à volta dele de cada vez. No Gradiently podes pedir ao Designer os outros tamanhos, ou com o Pro redimensionar um design para todos os tamanhos num só passo, e o teu fundo renderiza-se de novo em cada forma em vez de ser cortado. Os tamanhos personalizados vão de 200 a 8000 píxeis quando um fornecedor pede algo invulgar. Variações de logótipo explica que versão do logótipo pôr em cada um.