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

[Canonical HTML page](https://gradiently.design/pt-br/guide/logo-sizes)

Muita gente pergunta pelo tamanho certo de logo como se existisse um número só. Não existe: existe um arquivo mestre e um tamanho sensato para cada lugar onde ele aparece. Aqui estão esses lugares, com as dimensões e os arquivos certos.

## The short version

- Não existe um tamanho de logo correto; guarde um arquivo vetorial mestre e exporte a partir dele para cada lugar onde o logo aparece.
- Em sites, use um logo em SVG e defina o tamanho pela altura no CSS para que ele fique nítido em qualquer tela.
- Para fotos de perfil nas redes sociais, envie uma imagem quadrada e mantenha o logo bem dentro do centro, porque a maioria das plataformas corta a foto de perfil em círculo.
- Ao exportar um logo em PNG, faça com pelo menos o dobro do tamanho em que ele será exibido, para que fique nítido em telas de alta densidade.
- Para impressão, use um PDF ou SVG vetorial, ou um arquivo raster a 300 dpi no tamanho final impresso.

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.

| Arquivo | Tipo | Use para |
| --- | --- | --- |
| SVG | Vetor | Sites, apps e como mestre para trabalhos de tela |
| PDF | Vetor | Gráficas, sinalização e tudo que vai para um fornecedor |
| PNG com transparência | Raster | Slides, documentos, posts nas redes e e-mail |
| JPG | Raster | Só onde um fundo sólido não atrapalha, nunca para um logo sobre cor |

Dois arquivos vetoriais e um PNG transparente atendem a quase todo pedido. [SVG ou PNG](https://gradiently.design/pt-br/guide/svg-vs-png) explica essa escolha em mais detalhes.

## 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.

```html
<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>
```

Os atributos width e height reservam o espaço para que a página não pule enquanto o logo carrega. As alturas aqui são um ponto de partida; ajuste ao seu cabeçalho.

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](https://gradiently.design/pt-br/guide/favicon-design) lista os arquivos exatos, e as [diretrizes de favicon](https://support.google.com/webmasters/answer/9290858) 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.

Uma imagem de perfil quadrada com o logotipo fern centralizado sobre um gradiente verde, com espaço em volta para o corte circular

Um logotipo curto, centralizado e com margens generosas sobrevive ao corte circular.

Um banner largo de perfil do LinkedIn com as palavras Fern Studio e Plantas para espaços pequenos sobre o mesmo gradiente verde

O banner comporta o nome completo e uma frase sobre você, porque tem largura para isso.

### 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.

- Capa do Facebook 1640×624: 1640 × 624
- Banner do LinkedIn 1584×396: 1584 × 396
- Cabeçalho do X 1500×500: 1500 × 500
- Arte do canal no YouTube 2560×1440: 2560 × 1440

Quatro banners comuns, desenhados em escala. Todos são bem mais largos que altos, então um logo horizontal ou uma linha simples com o nome funciona melhor.

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](https://gradiently.design/pt-br/guide/social-media-image-sizes) traz todos os formatos de post.

## Tamanhos de logo para e-mail e impressão

| Lugar | Tamanho da tela | Arquivo do logo |
| --- | --- | --- |
| Cabeçalho de e-mail | 1200×600 | PNG, exportado com o dobro do tamanho de exibição |
| Assinatura de e-mail | 600×200 | PNG pequeno; muitos apps de e-mail bloqueiam SVG |
| Prévia de link (Open Graph) | 1200×630 | Logo perto do centro, PNG ou JPG |
| Cartão de visita | 1050×600 a 300 dpi | PDF vetorial a partir do mestre |
| Flyer A5 | 1748×2480 a 300 dpi | PDF vetorial a partir do mestre |
| Pôster A4 | 2480×3508 a 300 dpi | PDF vetorial a partir do mestre |

Os tamanhos de impressão estão em pixels a 300 dpi. Logos vetoriais imprimem nítidos em qualquer tamanho; logos raster precisam de 300 dpi no tamanho final impresso.

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](https://gradiently.design/pt-br/guide/image-resolution-for-print) antes de mandar qualquer coisa para a gráfica, e veja [design de assinatura de e-mail](https://gradiently.design/pt-br/guide/email-signature-design) para a assinatura em si.

> **Exporte com o dobro do tamanho de exibição** Um PNG exibido com 200 pixels de largura deve ser exportado com 400. Telas de alta densidade colocam dois ou mais pixels do aparelho em cada pixel CSS, e um logo exportado exatamente no tamanho de exibição fica sem nitidez nelas.

## 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](https://gradiently.design/pt-br/guide/logo-variations) mostra qual versão do logo usar em cada um.

## FAQ

### Qual deve ser o tamanho de um logo?

Não existe um tamanho único. Guarde um arquivo vetorial mestre e exporte uma versão para cada uso: SVG para sites, PNG quadrado para fotos de perfil, banners largos para capas e PDF vetorial para impressão.

### Qual é o melhor tamanho de logo para site?

Use um SVG e defina a altura no CSS para que ele caiba no cabeçalho em qualquer tela. Informe os atributos width e height para que a página não se mexa enquanto carrega.

### Qual deve ser o tamanho do logo para a foto de perfil nas redes sociais?

Envie uma imagem quadrada e mantenha o logo nos dois terços centrais, porque a maioria das plataformas corta a foto de perfil em círculo. Use o ícone ou o logo empilhado em vez de um largo.

### Qual resolução um logo precisa ter para impressão?

Use um PDF ou SVG vetorial, que imprime nítido em qualquer tamanho. Se você só tem um arquivo raster, ele precisa de 300 dpi no tamanho final impresso.

### Por que meu logo parece borrado?

Provavelmente foi exportado no tamanho de exibição ou ampliado a partir de um arquivo pequeno. Exporte PNGs com o dobro do tamanho de exibição a partir de um vetor mestre, ou use SVG na web.