Como Criar um Favicon Para Seu Site: Guia Completo

O que é favicon?

Favicon é o pequeno ícone que aparece:

• Na aba do navegador ao lado do título da página
• Nos favoritos/bookmarks do navegador
• No histórico de navegação
• Em alguns resultados de busca do Google

Apesar de pequeno, o favicon é parte essencial da identidade visual de um site. Um site sem favicon parece inacabado.

Qual o tamanho ideal para favicon?

O favicon base é 16x16 pixels, mas para garantir qualidade em todos os dispositivos você precisa de múltiplos tamanhos:

Nossa ferramenta gera todos esses tamanhos automaticamente a partir de uma única imagem.

Como criar um bom favicon

Dicas de design

• Use uma imagem quadrada como base
• Prefira designs simples — detalhes ficam invisíveis em 16x16 px
• Logos, monogramas e ícones funcionam melhor que fotos
• Use contraste alto para ser visível sobre fundos claros e escuros

Passo a passo com nossa ferramenta

1. Prepare sua imagem (PNG ou JPG, preferencialmente quadrada)
2. Acesse o [Gerador de Favicon](/gerador-de-favicon)
3. Faça o upload da imagem
4. Baixe o pacote com todos os tamanhos gerados

Como adicionar o favicon ao seu site

HTML puro

<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">

WordPress

1. Painel Admin → Aparência → Personalizar
2. Identidade do Site → Ícone do Site
3. Faça upload da imagem e salve

Next.js

Coloque o arquivo favicon.ico na pasta /public e o Next.js o detecta automaticamente.