Por que começar de um logo vetorial?
Todo arquivo que uma marca publica, do ícone de 16 px numa aba do navegador à imagem de 1.024 px da loja de apps, deve sair de uma única origem. Se essa origem é um PNG, cada exportação é um redimensionamento de pixels: os tamanhos pequenos borram e os grandes ficam sem nitidez. Se é um SVG feito de caminhos, cada tamanho é desenhado do zero. Os passos abaixo mantêm um SVG no centro e geram todo o resto a partir dele.
Um dos nossos logos de exemplo e, depois, o ícone iOS, o ícone adaptável do Android e o favicon que as nossas ferramentas de exportação geraram a partir do SVG dele. O favicon aparece ampliado; em 32 px, cada pixel conta.
Passo 1: descreva o logo e escolha uma ideia
Abra o gerador de logo com IA e escreva o que o logo deve mostrar: "uma coruja feita de círculos e triângulos, para um app de estudos, índigo e âmbar". Acrescente o nome da marca se o logo tiver que trazê-lo escrito. Escolha um estilo se você já souber o tipo de logo que quer; o guia de estilos de logo explica cada um. Cada envio gera quatro ideias, e o preço aparece no botão antes.
Passo 2: refine uma ideia com palavras
Escolha a ideia mais próxima do que você quer e diga o que mudar: "deixe o R mais grosso", "menos penas", "coloque o sol acima do pico". Um refinamento mantém o resto do logo. Prefira uma ou duas mudanças precisas por refinamento a uma lista de dez.
Passo 3: vetorize
Escolha Vetorizar no logo escolhido. Ele é traçado num SVG com cada cor nos seus próprios caminhos, e você pode comparar com o original antes de usar. Abra no editor de SVG para recolorir uma parte, excluir uma forma solta ou mudar o espaçamento do nome.
Confira três coisas antes de continuar. Em tamanho pequeno, a marca ainda é legível? Há formas ou letras se encostando que não deveriam? E as cores são exatamente as que você quer? Corrigir isso no SVG agora corrige todos os arquivos gerados a partir dele.
Passo 4: gere os ícones de app
O gerador de ícone de app gera, a partir do SVG:
- Android: PNGs por densidade de 48 a 192 px, uma imagem de 512 px para a Play Store e o XML do ícone adaptável, com o primeiro plano dentro da área segura e uma camada monocromática para ícones temáticos;
- iOS: um
AppIcon.appiconsetcom uma imagem opaca de 1.024 px para o Xcode.
Escolha uma cor de fundo e a margem ao redor da marca. Uma marca com espaço transparente em volta dá ao ícone monocromático do Android a forma real dela. Ícones de app para Android e iOS a partir de uma imagem explica os passos de importação e o que conferir num aparelho.
Passo 5: gere o favicon e os ícones PWA
O gerador de favicon gera o favicon.ico (16, 32 e 48 px num só arquivo), um favicon.svg quando a arte é feita de caminhos vetoriais limpos, PNGs de 16 e 32 px, um Apple touch icon de 180 px, ícones de 192 e 512 px com versões maskable, um site.webmanifest e o HTML para colar no <head> da sua página. Quais deles os navegadores usam, e por que um favicon ainda precisa de um ICO, está explicado em Favicon SVG, PNG ou ICO; a zona segura dos ícones maskable está em Ícones maskable para PWA.
Ou leve tudo de uma vez: o Kit de marca
O Kit de marca roda os mesmos exportadores no mesmo SVG com um único conjunto de configurações da marca (nome, nome curto, cor de tema, cor de fundo e margem) e coloca os resultados num só ZIP:
| Pasta | Conteúdo |
|---|---|
favicon/ |
o pacote de favicon e PWA |
app-icons/ |
os conjuntos de ícones de app para Android e iOS |
ios/ |
um image set do Xcode para usar o logo dentro do app |
android/ |
um VectorDrawable para usar o logo dentro do app |
png/ |
PNGs transparentes, com lado maior de 256, 512, 1.024 e 2.048 px |
svg/ |
o SVG otimizado e o original em precisão total |
Cada pasta tem exatamente o que a ferramenta separada gera a partir do mesmo arquivo, então você pode começar pelo kit e, depois, gerar de novo só uma parte. O preço do kit aparece antes de você baixar.
Antes de lançar
Pesquise o seu nome e marcas parecidas no registro de marcas de cada país onde você vende. Um logo gerado é novo, mas nada o compara com marcas registradas. Guarde o SVG como arquivo mestre e gere novos tamanhos a partir dele, nunca de um PNG.