Como criar um favicon para o seu site (ICO, PNG, ícones da Apple e do Android)
Nesta página
Resposta curta: comece com uma imagem quadrada simples, passe-a pelo gerador de favicon do Imgovo, baixe o ZIP, coloque os arquivos na pasta raiz do seu site e cole o HTML fornecido no <head> das suas páginas. Construtores de sites como WordPress, Shopify e Wix costumam ter uma configuração de “Ícone do site” em que você pode enviar o PNG de 512 px no lugar.
Para que serve um favicon
O favicon é o pequeno ícone na aba do navegador. Ele também aparece nos favoritos e no histórico, e os celulares usam ícones relacionados quando alguém adiciona o seu site à tela inicial. Um site sem favicon mostra um espaço reservado genérico, o que parece inacabado.
Como o ícone é exibido muito pequeno, o design importa mais do que a resolução.
Projetar para tamanhos minúsculos
- Mantenha simples. Uma forma marcante ou uma ou duas letras funcionam. Um logotipo cheio de detalhes vira uma mancha em 16 × 16 pixels.
- Use um contraste forte. As abas podem ser claras ou escuras.
- Prefira uma origem quadrada. Se o seu logotipo for largo, coloque-o em uma tela quadrada.
- Use um fundo transparente se quiser que o ícone se misture com a aba. Para fotos, o gerador recorta em quadrado a partir do centro.
- Deixe um pouco de espaço. As configurações de espaçamento interno e cantos arredondados ajudam a forma a respirar.
Se o seu logotipo tiver um fundo que você não quer, Remover fundo pode torná-lo transparente antes. Veja Como remover o fundo de uma foto. Para dar cantos arredondados ou formato de círculo a um logotipo quadrado, Imagem arredondada salva um PNG transparente.
Passo a passo
- Abra o gerador de favicon.
- Adicione sua imagem. PNG, SVG, JPG, WebP e outros são aceitos.
- Escolha como ela é ajustada: recorte quadrado a partir do centro ou ajuste da imagem inteira.
- Escolha o fundo (transparente ou uma cor), o espaçamento interno e os cantos arredondados. Os padrões de espaçamento interno e de cantos arredondados são 0%. Você também pode digitar um nome de app opcional.
- Confira as prévias.
- Baixe o ZIP.
Desfazer e Refazer funcionam com Ctrl+Z e Ctrl+Shift+Z.
O que há no ZIP
| Arquivo | Tamanho | Usado para |
|---|---|---|
| favicon.ico | 16, 32 e 48 px em um só arquivo | Abas do navegador, navegadores antigos |
| favicon-16x16.png | 16 px | Abas do navegador |
| favicon-32x32.png | 32 px | Abas do navegador, telas de alta densidade |
| apple-touch-icon.png | 180 px | Telas iniciais do iPhone e do iPad |
| android-chrome-192x192.png | 192 px | Android e aplicativos web instaláveis |
| android-chrome-512x512.png | 512 px | Android e aplicativos web instaláveis, envio como ícone do site |
| site.webmanifest | – | Descreve os ícones dos aplicativos web instaláveis |
O ícone da Apple recebe um fundo sólido porque iPhones e iPads mostram áreas transparentes em preto.
Adicionar os arquivos ao seu site
- Descompacte os arquivos na pasta raiz do seu site, ao lado do seu
index.html. - Copie o HTML da caixa “Copiar HTML” do gerador.
- Cole-o no
<head>de cada página ou no layout ou modelo compartilhado do seu site.
Um conjunto típico de tags tem esta aparência. Use exatamente o trecho que o gerador fornece, porque ele corresponde aos nomes dos seus arquivos:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Em um construtor de sites, encontre a configuração “Ícone do site” ou “Favicon” e envie o PNG de 512 px. O construtor então gera os outros tamanhos por conta própria.
Se o novo ícone não aparecer
Os navegadores guardam favicons em cache de forma muito agressiva. Depois de enviar os novos arquivos:
- Recarregue a página com uma atualização forçada.
- Abra o site em uma janela privada ou em outro navegador.
- Verifique se
/favicon.icoabre diretamente na barra de endereços. - Aguarde. Os mecanismos de busca podem levar um tempo para mostrar um novo ícone.
Criar apenas um ICO
Se você só precisa do favicon.ico, use o botão “Baixar só o favicon.ico”. Para outros tamanhos, Redimensionar imagem pode criar um PNG simples com as dimensões exatas de que você precisa. As dúvidas sobre formatos são tratadas em JPG, PNG, WebP ou AVIF.
Privacidade
Seu logotipo nunca sai do seu computador. Os ícones são criados no seu navegador, e o ZIP também é montado lá.
Faça agora
Abra o gerador de favicon, adicione seu logotipo e baixe o conjunto completo de ícones.
Perguntas frequentes
O que é um favicon?
Um favicon é o pequeno ícone que representa um site nas abas do navegador, nos favoritos e no histórico. Ícones relacionados são usados quando um site é adicionado à tela inicial de um celular.
Com que imagem devo começar?
Uma imagem quadrada com fundo transparente funciona melhor. Logotipos simples e marcantes e marcas com letras se saem melhor do que imagens detalhadas, porque os detalhes finos desaparecem em 16 × 16 pixels.
Por que o ícone da Apple tem fundo?
iPhones e iPads mostram áreas transparentes em preto, então o gerador as preenche com um fundo sólido, na cor que você escolheu ou em branco.
Posso criar só o favicon.ico?
Sim. Use o botão “Baixar só o favicon.ico” para obter apenas o arquivo ICO com vários tamanhos.
Meu logotipo é enviado?
Não. Os ícones são criados no seu navegador, e o ZIP também é montado lá.