Gerador de favicons

Quais arquivos de favicon um site precisa em 2026

Durante anos, os geradores de favicons produziam mais de 20 arquivos: dezenas de tamanhos para cada versão do iOS, ícones para o Windows 8, browserconfig.xml… Hoje quase tudo isso sobra. Os navegadores e sistemas atuais se viram com cinco arquivos, que são os que esta ferramenta gera:

Também está incluído o site.webmanifest com o nome, as cores e os caminhos dos ícones, e um favicon-32x32.png caso você não tenha SVG.

Como criar seu favicon passo a passo

1. Envie seu logo. O ideal é um SVG ou um PNG quadrado de 512 px ou mais. Se não for quadrado, ele é centralizado e encaixado sem deformar.
2. Escolha o fundo. Transparente fica bem nas abas, mas no iOS e no ícone maskable sempre é preciso um fundo sólido, então a ferramenta usa branco ou a cor que você escolher.
3. Ajuste a margem e os cantos. Uma margem de 5-10% evita que o logo encoste nas bordas. Os cantos arredondados só são aplicados se houver cor de fundo.
4. Confira a pré-visualização na aba do navegador (modo claro e escuro) e na tela inicial do iOS e do Android.
5. Baixe o ZIP, copie os arquivos para a pasta pública do seu site e cole o código no <head>.

O código que você precisa colar

Para um site HTML comum, esta é toda a marcação necessária:

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#ffffff">

A ordem importa: os navegadores que entendem SVG preferem o icon.svg, e os demais usam o ICO. O atributo sizes="48x48" no ICO evita um erro do Chrome que o fazia escolher o ICO mesmo quando havia um SVG.

No Next.js (App Router) você tem duas opções. A mais simples é copiar favicon.ico, icon.svg e apple-icon.png (renomeando apple-touch-icon.png) para a pasta app/: o Next.js gera as tags automaticamente. A outra é deixá-los em /public e declará-los em metadata.icons, que é o código da aba Next.js do gerador.

No WordPress, vá em Aparência → Personalizar → Identidade do site → Ícone do site e envie o icon-512.png; o WordPress gera os demais tamanhos.

Por que cada tamanho

• 16 e 32 px são os que aparecem nas abas: 16 em telas normais e 32 em telas Retina. Nesse tamanho os detalhes finos desaparecem, então, se o seu logo tem texto pequeno, considere usar só o símbolo ou a inicial.
• 48 px é usado pelo Windows em atalhos e pelo Google nos resultados de busca. O Google pede que o favicon seja múltiplo de 48 px e que possa ser rastreado.
• 180 px é o tamanho que o iOS pede para o ícone da tela inicial. O iOS não aceita transparência aqui: preenche com preto, por isso a ferramenta sempre coloca um fundo.
• 192 e 512 px são os mínimos que o Chrome exige para considerar uma PWA instalável. O de 512 também é usado na tela de abertura.
• Maskable 512 px: o Android aplica uma máscara com a forma escolhida pelo fabricante. Tudo o que é importante deve ficar dentro de um círculo que ocupe os 80% centrais do ícone; por isso esta versão tem uma margem mínima de 12%.

Erros comuns com favicons

• Usar um PNG renomeado para .ico. Alguns navegadores aceitam e outros não. O favicon.ico desta ferramenta é um contêiner ICO real com três PNG dentro.
• Logo detalhado demais. Um logotipo horizontal com texto vira uma mancha a 16 px. Crie ou recorte uma versão quadrada.
• Esquecer o modo escuro. Um ícone preto com fundo transparente some em abas escuras. Confira a pré-visualização nos dois modos, ou use um SVG com @media (prefers-color-scheme: dark) dentro.
• Cache do navegador. Os favicons são armazenados em cache de forma muito agressiva. Se não vir a mudança, abra diretamente /favicon.ico e recarregue com Ctrl+F5, ou teste em uma janela anônima.
• Ícones sem otimizar. Um icon-512.png exportado de um editor pode pesar 100 KB. A ferramenta os otimiza com OxiPNG sem perdas, normalmente 30-60% menos.

Perguntas frequentes

Ainda preciso de um favicon.ico?

Sim. Embora os navegadores modernos usem SVG ou PNG, muitas ferramentas, leitores RSS e clientes de e-mail pedem /favicon.ico diretamente na raiz do domínio. É o arquivo com maior compatibilidade.

Qual tamanho a imagem original deve ter?

O ideal é um SVG. Se usar PNG ou JPG, pelo menos 512 × 512 px para que o ícone da PWA não fique borrado. Imagens menores que 180 px geram ícones grandes pixelados.

Por que meu favicon não aparece no Google?

O Google precisa que o favicon esteja vinculado na página inicial, que seja rastreável (não bloqueado no robots.txt) e que seja quadrado e múltiplo de 48 px. Pode levar dias ou semanas para ser atualizado nos resultados.

O que é um ícone maskable?

É uma versão do ícone com margem de segurança para que o Android possa recortá-la com a forma usada por cada fabricante sem cortar o logo. É declarada no manifest com "purpose": "maskable".

Meu logo é enviado para algum servidor?

Não. Os ícones são desenhados com canvas e otimizados com WebAssembly no seu navegador. Nada sai do seu dispositivo.

Posso usar um SVG com cores que mudam no modo escuro?

Sim. Se você enviar um SVG, ele é incluído como está, como icon.svg, então você pode editá-lo e adicionar uma regra @media (prefers-color-scheme: dark) dentro para mudar suas cores. Se quiser deixá-lo mais leve antes, passe-o pelo otimizador de SVG.