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 |
O que é o gerador de favicon
O gerador de favicon é uma ferramenta que permite criar, a partir de uma única imagem, o arquivo favicon.ico junto com um conjunto completo de PNG em vários tamanhos. O formato ICO tem a particularidade de conseguir reunir várias resoluções — 16, 32, 48px e outras — dentro de um único arquivo, de modo que cada destino (aba do navegador, favorito, barra de tarefas) recebe automaticamente a versão pensada especificamente para ele. Não é preciso exportar cada tamanho manualmente: do recorte em quadrado aos ajustes finais de saída, todo o processo é resolvido diretamente na tela.
O carregamento da imagem, o recorte, a redução de tamanho e a conversão para ICO ou PNG são processados inteiramente em JavaScript, dentro do seu próprio navegador. A imagem enviada nunca chega a nenhum servidor, então você pode usar a ferramenta com total tranquilidade mesmo com logotipos ainda não divulgados publicamente ou materiais que a diretriz de marca da empresa considera confidenciais. Para a redução é usado o algoritmo Lanczos, que preserva o contraste dos contornos: mesmo em tamanhos tão pequenos quanto 16px, os traços de letras e logotipos tendem a permanecer legíveis em vez de virar uma mancha borrada.
Como criar um favicon
- Envie a imagem Arraste e solte o logotipo ou ícone que deseja converter, ou clique para escolher o arquivo no seu computador. São aceitos PNG, JPEG, SVG, WebP, GIF e BMP, então é possível partir de praticamente qualquer material que você já tenha em mãos.
- Recorte em formato quadrado Arraste a moldura de recorte para deslocá-la e use os cantos para ajustar o tamanho da seleção. Como o favicon exige sempre uma proporção quadrada, a moldura fica travada em 1:1, evitando qualquer distorção acidental; também é possível ajustar a posição com as setas do teclado para obter precisão de um único pixel.
- Escolha as configurações de saída Configure, conforme a necessidade, quais tamanhos serão reunidos dentro do favicon.ico, quais tamanhos de PNG serão gerados separadamente, o algoritmo de redução (Lanczos, bilinear ou vizinho mais próximo), a margem interna e a cor de fundo para as áreas transparentes.
- Gere e confira a pré-visualização Ao clicar em «Gerar favicons», todos os tamanhos são criados de uma só vez. A pré-visualização em tamanho real permite conferir, sem nenhum redimensionamento adicional do navegador, como cada tamanho pequeno realmente aparece antes de publicá-lo.
- Baixe e instale os arquivos Baixe os arquivos individualmente ou todos juntos em um ZIP, e cole o código HTML gerado automaticamente dentro da tag do seu site para que navegadores e dispositivos encontrem cada ícone.
Dicas para aproveitar melhor
- 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.
Casos de uso
Criação do favicon para um site novo
Antes de publicar um projeto, é possível preparar de uma só vez o conjunto completo de arquivos ICO e PNG junto com o código HTML correspondente, evitando o descuido comum de esquecer alguma tag dentro de
.Geração conjunta de ícones para PWA
Os tamanhos de 192px e 512px exigidos para adicionar um site à tela inicial ou exibir uma tela de splash são gerados ao mesmo tempo que o site.webmanifest correspondente, sem a necessidade de calcular ou exportar cada resolução separadamente.
Conversão em lote a partir de um logotipo de marca
É possível carregar o logotipo oficial de uma empresa ou projeto e, ajustando a margem e a cor de fundo de acordo com a diretriz de marca, exportar de uma vez todos os ícones exigidos pelos diferentes dispositivos e sistemas operacionais.
Atualização de favicons em um CMS ou gerador de sites estáticos
Ao renovar o favicon de um site administrado com WordPress, Hugo ou plataforma semelhante, esta ferramenta permite reunir sem lacunas todos os formatos de arquivo que aquele ambiente específico espera encontrar.
Renovação de ícones em um processo de rebranding
Quando um redesenho de logotipo exige atualizar ao mesmo tempo a aba do navegador, os favoritos salvos e o ícone da tela inicial, é possível regerar todo o conjunto e conferir imediatamente o resultado em cada destino antes de publicar.
Glossário
- favicon.ico
- O nome de arquivo que os navegadores procuram implicitamente na raiz de um site, mesmo sem nenhuma tag que o declare explicitamente. É salvo no formato ICO, capaz de conter várias resoluções de imagem dentro de um mesmo arquivo.
- Apple Touch Icon
- O ícone exibido quando um usuário de iOS adiciona uma página à tela inicial do dispositivo. Como o iOS preenche de preto as áreas transparentes desse ícone, recomenda-se sempre especificar uma cor de fundo sólida em vez de deixar a transparência.
- Algoritmo de Lanczos
- Um método de redução de imagens que utiliza como núcleo uma função sinc truncada em um número finito de lóbulos. Graças aos seus lóbulos negativos, ele reforça levemente o contraste das bordas durante a redução, o que o torna especialmente adequado para encolher logotipos e texto sem perder legibilidade.
- PWA (Progressive Web App)
- O nome geral para as tecnologias que permitem que um site se comporte como um aplicativo nativo: ser adicionado à tela inicial, exibir uma tela de splash própria e funcionar offline. Exige, entre outros recursos, ícones de 192px e 512px além de um arquivo site.webmanifest.
- site.webmanifest
- Um arquivo de configuração em formato JSON que define o nome, os ícones e a cor de tema de uma PWA. É colocado na raiz do site e vinculado a partir do HTML por meio de uma tag , permitindo que o navegador leia esses dados ao adicionar o site à tela inicial.
- Vizinho mais próximo
- Um algoritmo de redução que copia diretamente a cor do pixel mais próximo, sem misturá-la com os pixels vizinhos. Por não fazer média de cores, preserva contornos nítidos e bem definidos, sendo especialmente indicado para reduzir pixel art sem borrar suas bordas.
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.