Gerador de Favicon | ICO e PNG em vários tamanhos
Carregue uma imagem, recorte-a em quadrado e gere um favicon.ico reunindo vários tamanhos (16, 32, 48px e outros) junto de um conjunto completo de PNG. Redução de alta qualidade com Lanczos e código HTML pronto para colar, tudo processado no seu navegador.
Como declarar um favicon (por padrão)
A forma de declarar um favicon depende de até onde você quer ir. Aqui estão os padrões necessários, do mínimo indispensável ao suporte completo a PWA e modo escuro. Todos os trechos pressupõem que os arquivos gerados fiquem na raiz do site.
Padrão 1: o mínimo (apenas colocar o favicon.ico)
Sem escrever uma linha de HTML: basta colocar /favicon.ico na raiz do documento. Os navegadores procuram esse caminho implicitamente, então o ícone aparece sem nenhuma marcação.
your-site/
└── favicon.ico ← basta colocar aqui (nenhum HTML é necessário)
<!-- Se preferir declarar, esta única linha basta -->
<link rel="icon" href="/favicon.ico" sizes="any">| Indicado para | Sites pessoais, ferramentas internas e qualquer caso em que basta aparecer |
|---|---|
| Observações | Acrescentar sizes="any" faz com que os navegadores tratem corretamente o ICO como último recurso quando você adicionar ícones SVG ou PNG mais tarde. Recomenda-se incluir 16, 32 e 48px dentro do ICO. |
Padrão 2: configuração padrão (recomendada)
Além do ICO, arquivos PNG e um Apple Touch Icon — de longe a configuração mais comum hoje. Cobre desde os navegadores de desktop até adicionar o site à tela inicial do iOS.
<link rel="icon" href="/favicon.ico" sizes="any">
<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">| Indicado para | Sites corporativos, blogs e veículos de mídia — sites comuns |
|---|---|
| Observações | As áreas transparentes de um apple-touch-icon são preenchidas com preto, então exporte sempre um PNG opaco com cor de fundo. O iOS também arredonda os cantos, portanto deixar cerca de 10% de margem evita que as bordas sejam cortadas. |
Padrão 3: configuração completa para PWA
Em um PWA que abre como aplicativo a partir da tela inicial, os ícones são registrados no site.webmanifest. Sem 192px e 512px presentes, o Chrome não considera o app instalável.
<!-- HTML (dentro de head) -->
<link rel="icon" href="/favicon.ico" sizes="any">
<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="manifest" href="/site.webmanifest">
<!-- site.webmanifest -->
{
"name": "My Site",
"short_name": "Site",
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}| Indicado para | PWAs, aplicações web e serviços usados principalmente no celular |
|---|---|
| Observações | O iOS não consulta os ícones declarados no manifest, então um apple-touch-icon continua sendo necessário ao lado dele. display: "standalone" oculta a interface do navegador para que o site abra como um aplicativo nativo. |
Padrão 4: favicon SVG com suporte a modo escuro
Um favicon SVG é independente de resolução, e o CSS dentro do próprio SVG pode trocar as cores no modo escuro. Declare junto os arquivos ICO e PNG para os navegadores que não o suportam.
<!-- HTML (dentro de head). Vence o primeiro formato que o navegador conseguir ler -->
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- favicon.svg (invertendo a cor no modo escuro) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<style>
path { fill: #1a1a1a; }
@media (prefers-color-scheme: dark) { path { fill: #ffffff; } }
</style>
<path d="M4 4h24v24H4z"/>
</svg>| Indicado para | Sites com logotipo vetorial ou quem quiser que o ícone mude no modo escuro |
|---|---|
| Observações | Chrome, Firefox e Edge suportam favicons SVG. O Safari atualmente ignora SVG em rel="icon", portanto as alternativas em PNG e ICO são obrigatórias. |
Padrão 5: subdiretórios e renovação de cache
O que escrever quando os ícones não ficam na raiz, ou quando você substituiu o ícone mas o antigo continua aparecendo. Favicons são fortemente armazenados em cache, então mudar a URL é a solução mais confiável.
<!-- Informe o caminho completo quando os arquivos ficam em um diretório próprio -->
<link rel="icon" href="/assets/icons/favicon.ico?v=2" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/icons/favicon-32x32.png?v=2">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/apple-touch-icon.png?v=2">
<!-- Atenção ao caminho absoluto se o site é servido a partir de um subdiretório (ex.: /docs/) -->
<link rel="icon" href="/docs/favicon.ico" sizes="any">| Indicado para | Distribuição por CDN, sites com gestão centralizada de assets e trocas de ícone |
|---|---|
| Observações | A busca implícita por /favicon.ico na raiz é o único caminho que não dá para mudar, então mesmo servindo os ícones de um subdiretório, manter uma cópia na raiz não deixa lacunas. |
Qual arquivo é usado onde
Uma referência rápida de onde cada arquivo é realmente usado. Não é preciso ter todos — escolha conforme os ambientes que quiser cobrir.
| Arquivo | Tamanho | Onde é usado |
|---|---|---|
| favicon.ico | 16 / 32 / 48px | Abas do navegador, favoritos e barra de tarefas do Windows. É buscado na raiz mesmo sem nenhuma marcação |
| favicon-16x16.png | 16×16 | Aba do navegador em telas de resolução padrão |
| favicon-32x32.png | 32×32 | Aba do navegador em telas Retina e outras de alta resolução, além da barra de favoritos |
| apple-touch-icon.png | 180×180 | O ícone exibido ao adicionar o site à tela inicial do iOS ou iPadOS. A transparência é preenchida com preto |
| android-chrome-192x192.png | 192×192 | Ícone da tela inicial do Android (via manifest) |
| android-chrome-512x512.png | 512×512 | Splash screen do PWA e listagens de aplicativos (via manifest) |
| site.webmanifest | — | Arquivo de configuração do PWA que declara ícones, cor de tema e modo de inicialização |
| favicon.svg | Escalável | Chrome, Firefox e Edge. Permite trocar de cor no modo escuro |
Dicas
- Comece por uma imagem quadrada de pelo menos 512×512px e o contorno continuará legível até 16px. Se a imagem não for quadrada, a ferramenta de recorte integrada permite escolher exatamente a área quadrada desejada.
- O Lanczos3 calcula uma média ponderada dos pixels vizinhos enquanto os lóbulos negativos do seu núcleo realçam as bordas. Ele preserva mais do contorno do que o redimensionamento interno do navegador, e a diferença aparece em logotipos e textos.
- A característica que define o ICO é que um único arquivo pode conter vários tamanhos. Ao incluir 16, 32 e 48px, a aba, a barra de favoritos e a barra de tarefas do Windows escolhem cada uma a arte feita para elas.
- Os Apple Touch Icon têm as áreas transparentes preenchidas com preto, então um PNG opaco com cor de fundo é a escolha segura. Uma margem de cerca de 10% também evita que a máscara arredondada do iOS corte as bordas.
- Os navegadores mantêm os favicons em cache de forma bastante persistente. Se a substituição não aparecer, acrescente uma consulta como
?v=2à URL ou faça um recarregamento forçado.
Perguntas frequentes
/favicon.ico ainda é um caminho que os navegadores procuram implicitamente, mesmo sem nenhuma marcação. Leitores de feeds, serviços de favoritos e alguns rastreadores buscam esse ICO na raiz sem nunca analisar o seu HTML, então publicá-lo junto dos PNG não deixa lacunas.<link rel="icon" type="image/svg+xml">. Declarar ao lado dele os arquivos ICO e PNG gerados aqui garante uma alternativa confiável para os navegadores que ignoram ícones SVG.
Curiosidade — O desafio de desenhar em dezesseis pixels
Em 1999, o Internet Explorer 5 acrescentou um pequeno ícone ao lado das entradas da lista de Favoritos. O mecanismo era encantadoramente simples: bastava deixar um arquivo chamado favicon.ico na raiz do site para que ele fosse encontrado. O próprio nome é uma contração de «favorite icon». O elemento <link rel="icon"> só foi formalizado na especificação HTML bem depois, e a busca implícita por um ICO na raiz sobrevive até hoje puramente por compatibilidade.
O fato de o ICO ter tomado emprestado o formato de ícones do Windows acabou tendo grande importância. Um único arquivo ICO pode abrigar várias resoluções, o que significa que a aba de 16px e a barra de tarefas de 48px podem exibir desenhos genuinamente diferentes. Isso é mais do que conveniência: em uma tela de 16×16 pixels, reduzir mecanicamente um desenho feito para 48px faz os traços finos sumirem e as letras ficarem ilegíveis. Os designers de ícones desenhavam cada tamanho à mão porque era a única maneira de resolver esse problema.
A geração moderna de favicons substitui o desenho manual por outra pergunta: com que inteligência é possível reduzir? Uma média simples (bilinear) perde contraste nas bordas, enquanto a amostragem direta (vizinho mais próximo) descarta os traços finos por completo. A reamostragem Lanczos usa uma função sinc truncada em um número finito de lóbulos: o lóbulo principal preserva a informação original e os lóbulos negativos laterais erguem as bordas de novo. Essa ênfase suave no contorno é exatamente o que os ícones minúsculos precisam.
As exigências só cresceram desde então. O iPhone chegou em 2007 com o Apple Touch Icon (57px no início, 180px hoje), as PWAs tornaram necessários os 192px e 512px, e favicons SVG com suporte a modo escuro já estão em pauta. Parece muito alvoroço em comparação com deixar um único arquivo, mas o outro lado é que aquelas poucas dezenas de pixels na aba do navegador são vistas por um número enorme de pessoas.