Gerador de Favicon
Esta ferramenta processa tudo localmente no seu navegador. Nenhuma imagem ou dado é enviado para servidores.
O que é um Favicon?
Favicon (abreviação de "favorite icon") é o pequeno ícone associado a um site que aparece na aba do navegador, na barra de favoritos, no histórico e nos resultados de pesquisa. Ele foi introduzido pelo Internet Explorer 5 em 1999 e desde então tornou-se um elemento essencial da identidade visual de qualquer site.
Originalmente, favicons usavam o formato .ico com tamanho 16×16 pixels. Hoje, com a diversidade de dispositivos e contextos (navegadores, PWAs, atalhos mobile), múltiplos tamanhos e formatos são necessários para garantir que o ícone seja exibido corretamente em todos os cenários.
Tamanhos recomendados
Para máxima compatibilidade, o ideal é fornecer favicons nos seguintes tamanhos:
- 16×16 — abas do navegador (tamanho clássico)
- 32×32 — barra de favoritos e atalhos de desktop
- 48×48 — atalhos do Windows
- 180×180 — Apple Touch Icon (iOS home screen)
- 192×192 — ícone PWA para Android (manifest.json)
- 512×512 — splash screen de PWAs e ícone de alta resolução
Como usar no HTML
Adicione as seguintes tags dentro do <head> do seu HTML para referenciar os favicons:
<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">
Perguntas Frequentes
Favicon (favorite icon) é o pequeno ícone exibido na aba do navegador, na barra de favoritos e nos resultados de busca. Ele ajuda a identificar visualmente um site e reforça a identidade visual da marca.
Os tamanhos mais comuns são: 16×16 (abas do navegador), 32×32 (barra de favoritos), 48×48 (atalhos Windows), 180×180 (Apple Touch Icon para iOS) e 192×192 e 512×512 (PWA e Android). Recomenda-se gerar todos para máxima compatibilidade.
Adicione as tags <link> no <head> do seu HTML. Por exemplo: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">. Para Apple devices, use <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.
Sim. Esta ferramenta permite inserir qualquer emoji como texto e renderizá-lo como favicon usando o Canvas do navegador. O emoji será renderizado com a fonte do sistema operacional, portanto a aparência pode variar entre dispositivos.
PNG é o formato mais recomendado atualmente por ser suportado por todos os navegadores modernos, oferecer transparência e boa qualidade. O formato ICO (legado) ainda é útil para compatibilidade com navegadores antigos, mas PNG é o padrão.
Não. Todo o processamento é feito localmente no seu navegador usando Canvas API e JavaScript puro. Nenhuma imagem ou dado é enviado para servidores externos. Você pode usar a ferramenta com total privacidade.
Sim. A ferramenta gera os tamanhos 192×192 e 512×512 que são os exigidos pelo manifest.json de PWAs. Basta baixar esses tamanhos e referenciá-los no seu arquivo manifest.json com o type image/png.