Gerador de favicon
Crie um favicon.ico a partir de qualquer imagem, com todos os tamanhos que um navegador pede reunidos em um único arquivo.
Fazer um favicon sem enviar nada
Um favicon é a imagem pequena que o navegador mostra na aba, nos favoritos e ao lado de um atalho. O arquivo clássico para isso é favicon.ico, que não é bem uma imagem só: o contêiner ICO guarda vários quadros quadrados, e o navegador escolhe o tamanho de que precisa. Esta página abre o conversor de imagens com saída ICO e os quatro quadros de sempre já marcados, então basta soltar um logotipo para receber esse arquivo de volta.
Tudo acontece no seu navegador. Os quadros são desenhados em um canvas e o contêiner é montado byte a byte dentro da página, de modo que seu logotipo nunca sai da máquina — o que importa quando o design ainda não é público.
O que vai dentro do arquivo
| Quadro | Onde o navegador usa |
|---|---|
| 16 px | A aba e a lista de favoritos |
| 32 px | Telas de alta densidade, a barra de endereços, abas fixadas |
| 48 px | Atalhos do Windows e alguns contextos da área de trabalho |
| 256 px | Ícones de atalho grandes e tudo o que amplia o ícone |
O menu Tamanhos do ícone oferece ainda o conjunto clássico de três, «16, 32 e 48 px», ou «Somente 256 px» e «Somente 32 px» quando você já sabe exatamente do que precisa. Como os quadros são quadrados fixos, Qualidade e Redimensionar não se aplicam aqui e a página os esconde.
Comece pela imagem certa
- Quadrada é melhor que larga. Uma imagem que não é quadrada é encaixada no quadrado com preenchimento transparente, então um logotipo largo termina pequeno no meio. Recorte-a para um quadrado antes, ou use só o símbolo em vez do logotipo com o nome.
- Simples é melhor que detalhada. A 16 px, uma linha de texto vira um borrão cinza. Os favicons mais reconhecíveis são uma letra, uma forma ou uma silhueta.
- Dê contraste a ela. O ícone fica sobre o fundo do próprio navegador, claro em um tema e escuro no outro. Uma forma que só funciona no branco some no modo escuro.
- Comece grande. Forneça pelo menos uma imagem de 256 px para que o maior quadro não seja ampliado; os quadros menores nascem da redução, e é aí que o detalhe se perde com elegância.
Colocando no seu site
Deixar favicon.ico na raiz do site basta para todos os navegadores, porque todos procuram ali por padrão. Para declarar de forma explícita, ou para servir também um PNG, acrescente uma tag link no head da página: <link rel="icon" href="/favicon.ico" sizes="any">. Muitos sites acompanham o .ico de um PNG de 180 px para apple-touch-icon, que você também pode gerar aqui voltando a saída para PNG e redimensionando.
Se o ícone antigo continuar aparecendo depois de trocar o arquivo, é cache e não um arquivo com defeito: os navegadores guardam favicons por muito tempo. Uma recarga forçada, ou acrescentar ?v=2 à tag link, resolve.
Outros formatos na mesma ferramenta
O conversor também grava PNG, JPG e WebP, e consegue comprimir até um tamanho alvo em KB. Se você veio por uma conversão comum e não por um ícone, PNG para JPG e PNG para WebP já começam nesses formatos.