Gerador de Favicon

Gratuito DevTools

Gerador de Favicon Multi-tamanho

Crie favicons para todas as plataformas: 16x16 (browser), 32x32 (HiDPI), 48x48 (Windows), 180x180 (Apple) e 192x192 (PWA/Android). Faca upload de imagem, desenhe ou use um emoji.

7.2k usuarios Atualizado em Mar 2026 4.9/5

Avalie esta ferramenta:

4.9 (1204 votos) Obrigado!

Gerador de Favicon Multi-tamanho

Upload

Desenhar

Emoji

🖼️

Clique ou arraste PNG/SVG

Recomendado: 512x512px

Emoji ou texto (1-2 caracteres)

Fundo: Transparente

Tamanhos gerados

Gere um favicon para ver os tamanhos

HTML para adicionar ao <head>

Como Usar

Gere todos os tamanhos de favicon em segundos.

Escolha o metodo

Faca upload de uma imagem, desenhe no canvas ou use um emoji/texto.

Gere os favicons

Os 5 tamanhos sao gerados automaticamente apos o upload ou ao clicar em Gerar.

Baixe os arquivos

Baixe tamanhos individuais ou todos de uma vez com "Baixar todos".

Copie o HTML

Use o snippet HTML gerado para adicionar todos os favicons ao seu site.

Sobre o Gerador de Favicon

Esta ferramenta gera favicons em todos os tamanhos necessarios para uma cobertura completa de plataformas, usando a API Canvas do navegador. Tudo e processado localmente — nenhuma imagem e enviada.

Tamanhos gerados:

16x16: favicon padrao na aba do browser
32x32: favicon HiDPI / Retina
48x48: usado pelo Windows no taskbar
180x180: Apple Touch Icon para iOS
192x192: icone para PWA e Android Chrome

Artigo

Favicon Completo: Todos os Tamanhos, Formatos e HTML Necessarios para 2026

Por Equipe Chipak • Atualizado em Mar 2026 • 6 min de leitura

Neste artigo

O que e um favicon
Todos os tamanhos necessarios
HTML para adicionar ao head
Boas praticas de design
Favicon para PWA e manifest
Perguntas frequentes

1. O Que E um Favicon

O favicon (abreviacao de "favorites icon") e o pequeno icone que aparece na aba do navegador, nos favoritos, na tela inicial do smartphone e em outros contextos de interface. Apesar de pequeno, e uma das primeiras impressoes visuais que um visitante tem do seu site.

Com a evolucao dos dispositivos e sistemas operacionais, um unico arquivo favicon.ico nao e mais suficiente. Cada plataforma tem requisitos proprios de tamanho e formato.

2. Todos os Tamanhos Necessarios

Para cobertura completa em 2026, seu site deve oferecer:

16x16: tamanho padrao de favicon para abas de browser.
32x32: exibido em browsers HiDPI e como favicon na barra de endereco do Chrome.
48x48: usado pelo Windows para exibir o favicon no taskbar e Windows Explorer.
180x180: Apple Touch Icon — icone adicionado a tela inicial do iOS e macOS.
192x192: icone para Progressive Web Apps (PWA) e Android Chrome.
512x512: recomendado no manifest.json para splash screens de PWA.

"Comece com uma imagem quadrada de pelo menos 512x512px. Quanto maior a fonte, melhor a qualidade ao escalar para tamanhos menores."

3. HTML para Adicionar ao Head

Nosso gerador produz o snippet HTML completo pronto para copiar. O padrao recomendado inclui:

<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">

4. Boas Praticas de Design

Como o favicon e exibido em tamanhos minusculos, o design precisa ser pensado para legibilidade em pixel:

Use formas simples e alto contraste — detalhes finos desaparecem em 16x16.
Evite texto exceto em 1-2 letras com fonte bem espessa.
Prefira fundo com cor solida ao inves de transparente para melhor visibilidade em backgrounds escuros.
Teste o icone em fundo branco E escuro antes de publicar.

5. Favicon para PWA e Manifest

Para Progressive Web Apps, o arquivo manifest.json referencia os icones. Nossos favicons gerados podem ser usados diretamente:

Adicione os PNGs de 192x192 e 512x512 ao seu manifest.
Especifique "purpose": "any maskable" para icones que suportam bordas adaptativas.
O icone 512x512 e usado na splash screen ao instalar o PWA.

6. Perguntas Frequentes

Qual formato e melhor para favicon: PNG ou ICO?

PNG e o formato moderno preferido por ser suportado por todos os browsers atuais e gerar arquivos menores que ICO. O formato ICO ainda e util para compatibilidade com IE legado, mas e dispensavel para sites modernos.

Posso usar SVG como favicon?

Sim, browsers modernos como Chrome e Firefox suportam SVG como favicon com <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG e ideal para favicons com tema escuro/claro via media queries dentro do proprio SVG.

Por que meu favicon nao atualiza apos troca?

Browsers fazem cache agressivo do favicon. Para forcear a atualizacao, adicione um query string ao URL: href="/favicon.png?v=2". Usuarios tambem podem limpar o cache manualmente com Ctrl+Shift+R.