Como criar o favicon do seu site
O ícone da aba, do favorito e do atalho no celular — pronto em alguns minutos.
Favicon é o ícone pequeno que aparece na aba do navegador, na lista de favoritos e no atalho da tela de início do celular. Ele não é um arquivo só: cada lugar pede um tamanho, e é isso que costuma travar quem está publicando o primeiro site. Abaixo estão os quatro passos, os arquivos necessários e o código do <head>.
Os quatro passos
- Escolha a imagem Um símbolo simples, uma letra ou um ícone. Aos 16 pixels não cabe detalhe nem texto.
- Gere todos os tamanhos Use o gerador abaixo: ele monta o pacote inteiro de uma vez, no seu próprio navegador.
- Suba os arquivos na raiz Na mesma pasta do endereço principal do site — geralmente
public/ou a raiz do domínio. - Cole as tags no
<head>Cinco linhas, iguais para qualquer site em HTML.
Faça o seu agora
Escolha o ícone, a cor e o fundo. Tudo é gerado no seu navegador: as imagens não passam pelo servidor.
Fundo
Ícone
Nome do site (opcional)
Baixar
- favicon.ico
- favicon-16x16.png · favicon-32x32.png
- apple-touch-icon.png (180px)
- android-chrome-192x192.png · 512x512.png
- favicon.svg · site.webmanifest · COMO-INSTALAR.txt
Código para o <head>
<link rel="icon" href="/favicon.ico"> <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" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Quais arquivos você precisa
| Arquivo | Tamanho | Onde é usado |
|---|---|---|
favicon.ico | 32×32 | Aba do navegador e favoritos. É o arquivo que navegadores antigos procuram sozinhos na raiz. |
favicon-16x16.png | 16×16 | Aba do navegador em telas comuns. |
favicon-32x32.png | 32×32 | Aba em telas de alta densidade e atalho na barra de tarefas. |
apple-touch-icon.png | 180×180 | Atalho na tela de início do iPhone e iPad. |
android-chrome-192x192.png | 192×192 | Atalho no Android e instalação como aplicativo. |
android-chrome-512x512.png | 512×512 | Tela de abertura do aplicativo instalado. |
site.webmanifest | — | Diz ao Android o nome, as cores e quais ícones usar. |
O código do <head>
Cole estas linhas antes do fechamento do </head>, com os arquivos na raiz do site.
<link rel="icon" href="/favicon.ico"> <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" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Onde colocar em cada plataforma
- HTML puro. Suba os arquivos na mesma pasta do index.html e cole as linhas acima dentro do <head>.
- WordPress. Aparência → Personalizar → Identidade do site → Ícone do site. Envie o android-chrome-512x512.png: o WordPress gera os outros tamanhos.
- Wix e Squarespace. Configurações → Favicon (ou Browser Icon). Envie o PNG de 512×512 — o restante é automático.
- Shopify. Personalizar tema → Configurações do tema → Favicon. Envie o PNG de 512×512.
- Next.js. Coloque os arquivos em public/ e um app/icon.png; o framework injeta as tags sozinho.
Perguntas frequentes
Trocei o favicon e o antigo continua aparecendo. Por quê?⌄
O navegador guarda o favicon em cache por muito tempo, às vezes semanas. Abra o endereço direto (seusite.com/favicon.ico) e force a atualização com Ctrl+F5 para confirmar que o novo está no ar — na aba, ele costuma aparecer só depois que o cache expira ou em uma janela anônima.
Preciso mesmo de todos esses arquivos?⌄
Para um site simples, favicon.ico e apple-touch-icon.png já cobrem a maior parte dos casos. Os tamanhos maiores importam quando alguém adiciona o site à tela de início do celular: sem eles, o sistema corta uma miniatura do seu site e o resultado fica ruim.
Qual imagem funciona bem como favicon?⌄
Uma forma simples e reconhecível: um símbolo, uma letra ou um ícone. Aos 16 pixels não sobra espaço para detalhe nem para texto — o logotipo completo da empresa quase sempre vira um borrão.
Posso usar SVG como favicon?⌄
Sim, e os navegadores atuais aceitam. Mas mantenha o .ico junto: navegadores antigos e alguns leitores de feed ignoram o SVG e procuram o arquivo na raiz do domínio.
O favicon influencia no Google?⌄
Ele não melhora a posição, mas aparece ao lado do resultado na busca em celular. Um ícone nítido ajuda no reconhecimento e no clique; a ausência dele faz o Google mostrar um globo genérico.