Gerador de Favicon: Guia completo para ícones de navegador

Crie favicons que funcionam em todos os lugares — abas de navegador, favoritos, telas iniciais e launchers PWA.

5 min de leitura Imagem · HTML · PWA 6 seções + FAQ

O favicon é o primeiro elemento de marca que os usuários veem em uma aba do navegador. Um favicon ausente ou borrado sinaliza um site inacabado — mas fazer favicons corretamente em 2025 significa gerar múltiplos tamanhos e formatos.

A implementação moderna de favicon vai além de um único arquivo ICO 16×16. Você precisa de PNG para navegadores padrão, SVG para renderização escalável, e Apple touch icons para iOS.

O que é um favicon

Um favicon (abreviatura de "favorites icon") é uma pequena imagem exibida pelos navegadores em abas, favoritos e listas de histórico. O nome vem do recurso "Favoritos" do Internet Explorer em 1999. Hoje os favicons aparecem em muitos contextos: abas do navegador, barras de endereço, favoritos e como ícones de tela inicial em dispositivos móveis.

Ferramenta gratuita Gerador de Favicon Gere favicons em todos os tamanhos necessários a partir de qualquer imagem

Tamanhos necessários em 2025

O conjunto moderno de favicon inclui: PNG 16×16 e 32×32 para abas do navegador; PNG 48×48 para a barra de tarefas do Windows; PNG 180×180 para Apple touch icon (tela inicial iOS); PNG 192×192 e 512×512 para Android/PWA; um favicon SVG para navegadores modernos; e um arquivo ICO para compatibilidade com navegadores legados.

ICO vs PNG vs SVG favicon

O formato ICO é um contêiner que pode conter múltiplos tamanhos de imagem em um único arquivo — historicamente o padrão, mas cada vez mais substituído pelo PNG. Favicons PNG são amplamente suportados e oferecem transparência. Favicons SVG são suportados por Chrome, Firefox e Edge modernos — escalam perfeitamente e podem se adaptar ao modo escuro/claro via media queries CSS.

Ferramenta gratuita Conversor SVG para PNG Converta arquivos SVG para PNG em qualquer resolução

Tags HTML link para favicon

Coloque tags link de favicon no head do seu HTML. A configuração mínima moderna: uma tag rel="icon" apontando para seu SVG ou PNG, uma tag rel="apple-touch-icon" para iOS, e uma tag rel="manifest" para PWA. O arquivo ICO na raiz (/favicon.ico) é capturado automaticamente pelos navegadores.

Apple touch icon e ícones PWA

Quando usuários adicionam seu site à tela inicial do iOS, o Safari usa o apple-touch-icon. O tamanho preferido é 180×180 pixels. Para Android e Progressive Web Apps, especifique ícones no seu arquivo manifest.json com pelo menos versões PNG 192×192 e 512×512.

Dicas de design para ícones pequenos

Favicons devem ser legíveis a 16×16 pixels — evite ilustrações complexas. Use uma única letra em negrito ou uma forma geométrica simples. Garanta alto contraste entre o ícone e o cromo do navegador. Evite traços finos que desaparecem em tamanhos pequenos.

Ferramenta gratuita Codificador de Imagem para Base64 Incorpore imagens como strings Base64 em HTML e CSS

Perguntas frequentes

Qual é o tamanho mínimo de favicon? +
O mínimo é 16×16 pixels. No entanto, configurações modernas requerem múltiplos tamanhos: 32×32 para displays de maior DPI, 180×180 para iOS e 192×192 para PWA.
Posso usar apenas um arquivo favicon? +
Você pode usar um único favicon SVG para navegadores modernos, mas para compatibilidade completa precisa de um arquivo ICO e arquivos PNG para dispositivos Apple.
O favicon afeta o SEO? +
Diretamente não — o Google não usa favicons como fator de ranking. Indiretamente, um favicon profissional melhora o reconhecimento de marca e as taxas de cliques.
Como implemento suporte ao modo escuro no meu favicon? +
Favicons SVG suportam modo escuro via media queries CSS dentro do arquivo SVG. Use uma media query prefers-color-scheme para alternar entre variantes de ícones claros e escuros.
Por que meu favicon não atualiza após o deploy? +
Favicons são cacheados agressivamente pelos navegadores. Para forçar uma atualização, renomeie o arquivo favicon e atualize a tag link HTML, ou adicione uma string de query como ?v=2.
O que é um ícone de manifesto de aplicação web? +
Ícones de manifesto de aplicação web são definidos no arquivo manifest.json do seu site e usados quando usuários instalam seu PWA na tela inicial.
Meu favicon deve ter fundo transparente? +
Depende do tema do navegador. Favicons transparentes parecem bons em navegadores de tema escuro, mas podem ser invisíveis em fundos claros. Um fundo de cor sólida é geralmente mais seguro.