Você tem um logo, e o seu site precisa de um favicon: aquela imagenzinha na aba do navegador. Fácil, até você descobrir que os navegadores, o iPhone, os celulares Android e o Windows querem, cada um, o seu próprio tamanho e o seu próprio arquivo. O gerador de favicon do GetPlugzz faz tudo isso a partir de uma imagem. Você solta o logo, aperta um botão e recebe favicon.ico, um ícone Apple, ícones Android, um tile do Windows, um arquivo manifest e o código para colar no seu site. Ele roda no seu navegador, então não tem conta, nem marca d'água, e nada é enviado.
Como criar um favicon em todos os tamanhos a partir de uma só imagem?
Abra o gerador de favicon e faça isto:
- Adicione uma imagem. Solte o seu logo na caixa ou clique para escolher. Uma imagem quadrada de pelo menos 512 × 512 pixels funciona melhor. Qualquer outra é cortada em um quadrado a partir do centro.
- Confira a prévia. Se a sua imagem tem fundo transparente, ele é mantido, o que é perfeito para logos. Você verá todos os tamanhos que serão criados.
- Baixe. Aperte Baixar Tudo (ZIP) para obter todos os tamanhos e cole o código mostrado no head do seu site. Existe um botão Copiar para o código.
Não tem nada para redimensionar à mão nem nada para instalar. Se o navegador bloquear o download, clique em Permitir perto da barra de endereços e ele segue.
Por que um favicon precisa de tantos tamanhos?
Pense numa cabine de fotos que imprime a mesma imagem como um adesivo minúsculo, uma foto de passaporte e um pôster. É o mesmo rosto, mas cada lugar tem a sua própria moldura. Um favicon funciona igual. O seu logo aparece em lugares diferentes, e cada um pede um tamanho diferente:
- 16 × 16 e 32 × 32: a aba do navegador. A de 32 mantém a nitidez em telas de alta resolução (retina).
- 48 × 48: atalhos do Windows.
- 150 × 150: o tile do Windows.
- 180 × 180: o ícone Apple touch, que iPhones e iPads usam quando alguém adiciona o seu site à tela inicial.
- 192 × 192 e 512 × 512: Android, para a tela inicial e a tela de abertura (também usados em aplicativos web).
O que tem dentro do arquivo ZIP?
A ferramenta cria tudo isso para você e empacota num arquivo só:
- favicon.ico: o ícone clássico das abas do navegador. É um arquivo de verdade com vários tamanhos, com as versões 16, 32 e 48 dentro.
- favicon-16x16.png, favicon-32x32.png e favicon-48x48.png: os tamanhos pequenos.
- apple-touch-icon.png: o ícone para iPhone e iPad.
- android-chrome-192x192.png e android-chrome-512x512.png: os ícones para Android.
- mstile-150x150.png: o tile do Windows.
- site.webmanifest: diz aos navegadores quais ícones usar.
- head-snippet.html: o código para colar, salvo como arquivo.
Onde vão os arquivos?
Envie os arquivos para a pasta principal do seu site e cole o código da ferramenta no head das suas páginas. Esse código é o que diz ao navegador onde achar cada ícone. Duas dicas pequenas: abra o site.webmanifest e adicione o nome do seu site, porque ele fica vazio, e troque a cor do tema se quiser algo diferente de branco.
Ainda não tem um site para enviá-los? O nosso guia para lançar o seu primeiro site cobre o domínio, a hospedagem e as páginas. Se preferir não começar de uma página em branco, um AI website builder (link patrocinado) da Bluehost inclui hospedagem, então você teria onde colocar os arquivos.
Qual imagem funciona melhor?
- Quadrada e grande. Comece com pelo menos 512 × 512 pixels. A ferramenta reduz para todos os tamanhos, então você nunca precisa redimensionar nada.
- Centralizada. Uma imagem que não é quadrada é cortada em um quadrado a partir do centro, então deixe o importante no meio.
- Transparente tudo bem. Se o seu logo tem fundo transparente, os ícones o mantêm.
- O simples vence. Em 16 pixels há muito pouco espaço, então uma forma marcante ou uma letra só se lê melhor do que um desenho cheio de detalhes.
Uma coisa para saber: uma imagem de cada vez
O gerador cria todos os tamanhos a partir de uma imagem de uma só vez. Ele não processa vários logos diferentes de uma vez. Se você tem outro site, aperte Escolher outra imagem e comece de novo, o que leva alguns segundos.
Bom saber antes de começar
- Uma imagem que não é quadrada é cortada a partir do centro. Use uma imagem quadrada para nada ser cortado.
- Dê ao ícone da Apple um fundo sólido: iPhones preenchem áreas transparentes com preto.
- Em 16×16 pixels os detalhes finos somem, então uma forma simples funciona melhor.
- Navegadores e o Google guardam favicons antigos por um tempo; um novo pode levar dias para aparecer.
- Preencha o nome do seu site em site.webmanifest e envie todos os arquivos para a pasta principal do seu site.
Perguntas frequentes
Sim. Não tem conta e não tem marca d'água.
Não. Os ícones são criados no seu navegador e a sua imagem nunca sai do seu dispositivo.
Comece com uma imagem quadrada de pelo menos 512 × 512 pixels. A ferramenta reduz para todos os tamanhos de que você precisa, então você não precisa redimensionar nada.
Funciona. Se o seu logo tem fundo transparente, ele continua transparente nos ícones.
Envie-os para a pasta principal do seu site e cole o código da ferramenta no head das suas páginas.
Gerador de Favicon grátis — todos os tamanhos, uma imagem
Uma imagem entra, todos os tamanhos de ícone saem: ico, Apple, Android, Windows e o código para colar. Feito pelo GetPlugzz, criado inteiramente no seu navegador.
