Gerador de Favicon Online e Grátis

Guia Completo sobre Favicon: Como Criar, Instalar e Otimizar o Ícone do Seu Site

O favicon é um dos detalhes mais subestimados do design web. Apesar de minúsculo — apenas 16×16 pixels na aba do navegador — ele carrega um peso enorme para a identidade visual de qualquer site. Neste guia, você vai aprender tudo sobre esse pequeno ícone poderoso.

O que é um Favicon?

Favicon é a abreviação de "favorite icon" e representa o ícone que aparece na aba do navegador ao lado do título da página, na lista de favoritos, na barra de endereços e nos resultados de busca do Google. Foi introduzido pelo Internet Explorer 5 em 1999 e hoje é um padrão universal em todos os browsers modernos.

Formato PNG vs ICO — Qual Usar?

Formato ICO (.ico)

O ICO é o formato nativo do favicon. Sua principal vantagem é que um único arquivo pode conter múltiplas resoluções (16×16, 32×32, 48×48), e o sistema operacional escolhe automaticamente a melhor para cada contexto. É o mais compatível — funciona desde o IE5 até os navegadores mais modernos.

Formato PNG (.png)

O PNG oferece transparência real (canal alpha), qualidade superior em tamanhos maiores e é o formato moderno recomendado. Todos os browsers modernos suportam PNG como favicon. Para dispositivos Apple e Android, o PNG é obrigatório.

Dimensões Ideais por Plataforma

Depois de adicionar as tags, suba os arquivos para a raiz do servidor (pasta public/, www/ ou htdocs/).

Estrutura recomendada de arquivos

meu-projeto/
└── public/
    ├── favicon.ico           ← raiz do servidor
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png  ← 180×180
    ├── icon-192x192.png
    └── icon-512x512.png

Como Adicionar no WordPress

1. Via Personalizador: Vá em Aparência → Personalizar → Identidade do Site → Ícone do Site. Faça o upload de uma imagem quadrada de pelo menos 512×512 px.

2. Via Plugin: Plugins como Favicon by RealFaviconGenerator ou All in One Favicon oferecem mais controle.

Apple Touch Icon e Android PWA

Apple Touch Icon

Quando o usuário salva seu site na tela inicial do iPhone ou iPad, o iOS usa o Apple Touch Icon como ícone do app. Tamanho recomendado: 180×180 pixels.

Android PWA (site.webmanifest)

{
  "name": "Meu Site",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "display": "standalone"
}

Favicon e SEO — Impacto no Google

Desde 2019, o Google exibe o favicon do site nos resultados de busca (SERP) ao lado da URL. Um favicon bem elaborado aumenta o reconhecimento da marca e pode melhorar a taxa de cliques (CTR) organicamente.

Perguntas Frequentes sobre Favicon

Por que meu favicon não aparece no navegador?

Provavelmente é cache. Pressione Ctrl+Shift+R (ou Cmd+Shift+R no Mac) para recarregar sem cache. Se persistir, verifique se o arquivo foi publicado corretamente no servidor.

O favicon precisa ser quadrado?

Sim. Todos os navegadores e sistemas esperam um ícone quadrado. Imagens retangulares serão cortadas ou distorcidas.

Qual o tamanho máximo do arquivo .ico?

Para o favicon.ico que contém múltiplos tamanhos, o ideal é ficar abaixo de 100 KB. Para PNGs individuais, o 512×512 deve ficar abaixo de 50 KB.

Preciso de favicon para PWA funcionar?

Sim. Para o site ser instalável como PWA, é obrigatório ter ícones declarados no manifest.json com pelo menos os tamanhos 192×192 e 512×512.

Quanto tempo o Google leva para atualizar meu favicon?

De alguns dias a algumas semanas. Para acelerar, solicite uma nova indexação no Google Search Console.