DevTools
Ajude-nos

Gerador de Favicon

Crie favicons profissionais em segundos com texto, emoji ou imagem. Suporte para gradientes e múltiplas fontes.

Configurações
Máximo 4 caracteres para melhor visualização
80%
→ °
#5c94e5 → #8a77d7 (90°)
Pré-visualização
∞
Guia Completo de Instalação dos Favicons
O que recebe no pacote
  • favicon.ico - Ícone universal
  • favicon-16x16.png - Navegadores desktop
  • favicon-32x32.png - Retina display
  • favicon-48x48.png - Windows taskbar
  • favicon-192x192.png - Android Chrome
  • favicon-512x512.png - PWA
  • manifest.json - Configuração PWA
  • how-to-use.html - Guia detalhado
Onde colocar os arquivos

Extraia todos os arquivos do ZIP para a raiz do seu site (pasta pública onde está o index.html):

seu-site/
├── index.html
├── favicon.ico          ← Novo
├── favicon-16x16.png    ← Novo
├── favicon-32x32.png    ← Novo
├── favicon-48x48.png    ← Novo
├── favicon-64x64.png    ← Novo
├── favicon-128x128.png  ← Novo
├── favicon-192x192.png  ← Novo
├── favicon-512x512.png  ← Novo
├── manifest.json        ← Novo
└── how-to-use.html      ← Novo (opcional)
Adicione o código no seu HTML

Copie este código e cole dentro da tag <head> do seu HTML:

<!-- Favicon Links -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
<link rel="apple-touch-icon" sizes="192x192" href="/favicon-192x192.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#1E88E5">
Nota: Se o seu site estiver numa subpasta, ajuste os caminhos (ex: href="/minha-pasta/favicon.ico")
Entenda as meta tags
favicon.ico

Formato clássico suportado por todos os navegadores, incluindo versões antigas do Internet Explorer.

apple-touch-icon

Ícone usado quando o site é adicionado à tela inicial do iPhone ou iPad.

manifest.json

Arquivo de configuração para Progressive Web Apps (PWA), permitindo instalação do site como app.

theme-color

Define a cor da barra de navegação em dispositivos móveis Android.

Como testar se funcionou
  • Abra o site no navegador e verifique se o favicon aparece na aba
  • Adicione o site aos favoritos e verifique se o ícone aparece
  • Em dispositivos móveis, adicione à tela inicial e verifique o ícone
  • Use o DevTools (F12) → Application → Manifest para verificar a configuração PWA
  • Limpe o cache do navegador (Ctrl+F5) se não aparecer imediatamente
Dicas avançadas

No WordPress, coloque os arquivos na raiz da instalação (onde está o wp-config.php).

Adicione o código HTML no arquivo header.php do seu tema, dentro da tag <head>, ou use um plugin como "Insert Headers and Footers".

Se o site está em exemplo.com/meu-site/, ajuste os caminhos:

<link rel="icon" href="/meu-site/favicon.ico">

Navegadores fazem cache agressivo de favicons. Se não aparecer:

  • Chrome/Edge: Ctrl + F5 (força atualização)
  • Firefox: Ctrl + Shift + R
  • Safari: Cmd + Option + R
  • Ou use modo anónimo/privado para testar