Para fazer um banner, defina primeiro onde ele vai aparecer (isso decide o tamanho), escreva uma mensagem curta com uma chamada para ação, escolha uma imagem forte e monte tudo numa ferramenta como Canva ou Adobe Express. Depois exporte num arquivo leve e confira como ele fica no celular.
Abaixo estão os tamanhos certos para site, anúncios e redes sociais, o passo a passo nas duas ferramentas gratuitas mais usadas e os cuidados que separam um banner que funciona de um que só ocupa espaço.
- O que é um banner e os tipos mais usados
- Tamanhos de banner para site e redes sociais
- Os elementos de um bom banner
- Como fazer um banner no Canva
- Como fazer um banner no Adobe Express
- Texto e CTA: o que escrever
- Colocando o banner no site sem pesar
- Acessibilidade: contraste e texto alternativo
- Erros comuns
- Perguntas frequentes
O que é um banner e os tipos mais usados
Banner é uma peça gráfica, quase sempre retangular, feita para passar uma mensagem em poucos segundos: uma promoção, um lançamento, um convite. Pode ser impresso em lona ou ser digital. Aqui o foco é o digital, mas as regras de texto e contraste valem para os dois.
- Banner principal (hero): a faixa grande no topo da página inicial. É a primeira coisa que o visitante vê.
- Carrossel (slider): vários banners que se alternam no mesmo espaço. Popular em lojas virtuais, mas só o primeiro slide tem visualização garantida; deixe nele a oferta principal.
- Faixa de aviso: uma linha fina no topo com frete, cupom ou prazo de entrega.
- Banner de anúncio (display): os formatos padronizados que aparecem em sites e apps via Google Ads e outras redes.
- Capa de rede social: o topo do perfil no Facebook, YouTube, LinkedIn e afins.
Tamanhos de banner para site e redes sociais
Comece pelo tamanho, nunca pelo layout. Uma arte feita em 1920 × 600 e depois espremida num quadrado perde o texto pelas bordas. Para banners de site não existe padrão oficial: o tamanho certo é o que o seu tema ou plataforma de loja pede, e quase todos informam isso nas configurações. Para anúncios e redes, os números abaixo vêm das próprias plataformas.
| Onde | Tamanho (px) | Observação |
|---|---|---|
| Banner principal do site (computador) | Varia conforme o tema; 1920 de largura é comum | Prepare uma versão vertical para celular |
| Google Ads: retângulo | 300 × 250 e 336 × 280 | Formatos que aparecem em mais lugares |
| Google Ads: cabeçalho e outdoor | 728 × 90, 970 × 90 e 970 × 250 | Topo de páginas no computador |
| Google Ads: arranha-céu | 160 × 600 e 300 × 600 | Laterais de página |
| Google Ads: celular | 320 × 50 e 320 × 100 | Arquivos de até 150 KB (GIF, JPG ou PNG) |
| Capa da Página do Facebook | 851 × 315 (mínimo 400 × 150) | No celular as laterais são cortadas |
| Banner do canal no YouTube | 2560 × 1440 (mínimo 2048 × 1152) | Texto e logo dentro de 1235 × 338 no centro; até 6 MB |
| Capa da Página no LinkedIn | 1512 × 256 | PNG ou JPG, até 3 MB |
| Feed do Instagram e anúncios da Meta | 1080 × 1350 (4:5) | Ocupa mais tela no celular que o quadrado |
| Stories e Reels | 1080 × 1920 (9:16) | Deixe livres o topo e a base, onde ficam nome e botões |
Fontes: Ajuda do Google Ads, Central de Ajuda do Facebook, Ajuda do YouTube, Ajuda do LinkedIn e Guia de Anúncios da Meta. As redes mudam essas medidas sem aviso; se algo parecer cortado, confira a página oficial.
O caso do banner do YouTube
É o banner que mais gente erra. A mesma imagem aparece inteira na TV e vira uma tira fina no celular, então tudo que importa (nome do canal, frequência de vídeos, uma frase sobre o conteúdo) precisa caber na área segura central de 1235 × 338 px. O resto é fundo. O próprio YouTube pede para não usar bordas nem molduras. Se você ainda está montando o canal, o guia de como criar um canal no YouTube cobre as outras etapas.
Os elementos de um bom banner
Pense no banner como uma placa de estrada. A pessoa passa rápido e precisa entender a mensagem sem parar. Quase todo banner que funciona tem estas peças, nesta ordem de leitura:
- Uma imagem que conta o assunto sozinha: o produto, alguém usando o serviço, o resultado.
- Um título curto, com a oferta ou o benefício. É o maior texto da peça.
- Uma linha de apoio, opcional, com prazo, condição ou detalhe.
- Um botão ou CTA com verbo, em cor que se destaque do resto.
- A marca, pequena e num canto. Em banner do próprio site, muitas vezes nem precisa.
Por trás disso entram respiro (espaço vazio em volta do texto), alinhamento numa grade e no máximo duas fontes. Para escolher cores que combinem com a marca, o post sobre cores no marketing ajuda. Ferramentas como o Adobe Color sugerem combinações a partir de uma cor da marca e têm ferramentas de acessibilidade para checar o contraste.
Como fazer um banner no Canva
O Canva funciona no navegador e no celular, tem plano gratuito e milhares de modelos. Para um banner de site:
- Entre em canva.com e crie uma conta gratuita.
- Clique em Criar um design e depois em Tamanho personalizado. Informe largura e altura em pixels (use a tabela acima).
- No painel de modelos, busque “banner” e escolha um com estrutura parecida com o que você quer. Troque tudo: modelo pronto sem adaptação fica com cara de modelo pronto.
- Substitua a imagem pela sua (em Uploads) ou por uma do banco do Canva. Elementos com o ícone de coroa são do plano pago.
- Escreva título, linha de apoio e botão. Ajuste fontes e cores da sua marca.
- Reduza o zoom até o banner ficar do tamanho que terá na tela do celular. Se o texto ficar ilegível, aumente a fonte ou corte palavras.
- Vá em Compartilhar > Baixar. Use JPG para fotos e PNG para artes com texto e cores chapadas.
Dica: no plano gratuito do Canva, o redimensionamento automático para outros formatos e o removedor de fundo ficam de fora. Se precisar da mesma peça em seis tamanhos, duplique o design e crie cada versão à mão, reposicionando os elementos.
Como fazer um banner no Adobe Express
O Adobe Express segue a mesma lógica: você escolhe “Banner” (ou um tamanho personalizado), parte de um modelo, troca imagem e texto e baixa o arquivo. A diferença está nos extras. O plano gratuito traz mais de 100 mil modelos, 5 GB de armazenamento e algumas gerações diárias com a IA Firefly, útil para criar um fundo ou uma textura quando não há foto boa disponível.
| Canva (grátis) | Adobe Express (grátis) | |
|---|---|---|
| Modelos | Muitos, parte deles só no pago | Mais de 100 mil, parte deles só no pago |
| Armazenamento | 5 GB | 5 GB |
| Redimensionar com um clique | Só no pago | Só no pago |
| IA generativa | Uso limitado | Gerações diárias gratuitas (Firefly) |
| Melhor para | Quem quer o maior acervo de modelos em português | Quem já usa produtos Adobe ou quer gerar imagens com IA |
Os planos mudam com frequência, então confira a página de preços de cada um antes de decidir.
Texto e CTA: o que escrever
O texto de um banner é mais parecido com um título de jornal do que com um parágrafo. Diga o que a pessoa ganha e o que ela deve fazer. Compare:
| Fraco | Melhor | Por quê |
|---|---|---|
| Bem-vindo à nossa loja | Frete grátis acima de R$ 199 até domingo | Oferta concreta e prazo |
| Clique aqui | Ver os modelos | Diz o que acontece depois do clique |
| Qualidade e tradição desde 1998 | Conserto de notebook em 48 h | Benefício que o cliente procura |
| Confira nossas novidades incríveis!!! | Coleção de inverno chegou | Sem exageros, mais crível |
O botão merece atenção à parte. Use verbo e seja específico (“Baixar o guia”, “Agendar visita”), dê a ele a cor mais forte da peça e deixe espaço em volta. Se você tem duas versões e não sabe qual é melhor, teste: o post sobre CRO explica como fazer teste A/B sem tirar conclusão de pouco dado.
Colocando o banner no site sem pesar
O banner principal costuma ser o maior elemento da página e, por isso, muitas vezes é ele que define o LCP, métrica do Google que mede quanto tempo o conteúdo principal leva para aparecer. Um banner de 2 MB pode deixar a página inteira lenta. Quatro cuidados resolvem a maior parte:
- Exporte no tamanho em que o banner será exibido, não maior.
- Converta para WebP ou AVIF e comprima. O Squoosh, do Google, faz isso no navegador; no WordPress, há plugins de otimização de imagens que convertem sozinhos.
- Sirva uma versão menor (e vertical, se fizer sentido) para celular, como pede um design responsivo.
- Não use carregamento tardio (lazy loading) no banner do topo. Ele precisa carregar primeiro.
Se você mexe no HTML ou o tema permite, a marcação fica mais ou menos assim:
<picture>
<source media="(max-width: 600px)" srcset="banner-celular.webp">
<img src="banner-1920.webp" width="1920" height="600"
alt="Frete grátis acima de R$ 199 até domingo"
fetchpriority="high">
</picture>Os atributos width e height evitam que a página “pule” enquanto a imagem carrega, e fetchpriority="high" avisa o navegador que essa imagem vem primeiro. O guia de LCP do web.dev detalha outras otimizações.
Acessibilidade: contraste e texto alternativo
Um banner que parte do público não consegue ler é um banner pela metade. E acessibilidade aqui não dá trabalho extra; são decisões que você toma de qualquer jeito.
Contraste
As diretrizes WCAG pedem contraste mínimo de 4,5:1 entre texto e fundo, ou 3:1 para texto grande. Texto amarelo-claro sobre branco, ou branco sobre uma foto de céu, quase nunca passa. Teste as cores no verificador de contraste da WebAIM. Quando o texto fica sobre foto, uma camada escura semitransparente atrás dele costuma resolver.
Texto alternativo
O atributo alt é o que o leitor de tela lê no lugar da imagem. Em banner, ele deve repetir a mensagem, não descrever a foto: “Frete grátis acima de R$ 199 até domingo” serve; “banner-promo-final-v3” ou “mulher sorrindo com sacola” não. O tutorial de imagens do W3C traz exemplos para cada caso.
Carrossel automático: se os slides trocam sozinhos por mais de cinco segundos, a WCAG exige um jeito de pausar. Muitos plugins de slider já têm essa opção; ative.
Erros comuns
- Colocar três ofertas num banner só. A pessoa não lê nenhuma.
- Fazer o banner no monitor grande e nunca olhar no celular, onde o texto vira formiga.
- Escrever em cima da parte mais “movimentada” da foto.
- Pôr título, preço e botão dentro da imagem no banner do site. Prefira texto em HTML sobre a imagem: ele se adapta à tela, é lido pelo Google e pelos leitores de tela.
- Deixar texto ou logo fora da área segura (YouTube, Stories, capa do Facebook no celular).
- Usar foto achada no Google. Bancos como Unsplash e Pexels têm imagens de uso livre.
- Esquecer o banner no ar depois que a promoção acabou. “Só até domingo”, três semanas depois, passa a impressão de site abandonado.
Perguntas frequentes
É uma peça gráfica, geralmente retangular, feita para passar uma mensagem rápida, como uma promoção ou um lançamento. Pode ser impressa ou digital, e no digital aparece no topo de sites, em anúncios e nas capas de redes sociais.
Não há um padrão único: use o tamanho que o seu tema ou plataforma pede (1920 px de largura é comum no computador) e prepare uma versão menor para celular. Para anúncios do Google, os formatos 300 × 250, 336 × 280, 728 × 90 e 320 × 50 estão entre os aceitos, segundo a Ajuda do Google Ads.
Sim. Canva e Adobe Express têm planos gratuitos com modelos prontos e exportação em JPG e PNG. O que fica no plano pago é, principalmente, o redimensionamento automático para vários formatos e parte dos modelos e imagens.
Na ferramenta, exporte em JPG se a arte for uma foto e em PNG se tiver muito texto e cores chapadas. Para publicar no site, converta para WebP ou AVIF e comprima, o que costuma reduzir bem o peso sem perda visível.
Crie a arte em 2560 × 1440 px (mínimo 2048 × 1152, até 6 MB) e mantenha texto e logo dentro da área segura central de 1235 × 338 px, que é o que aparece em todos os aparelhos, conforme a Ajuda do YouTube.
