Converter Imagem em Favicon
Saia com o favicon.ico multi-resolução, os PNGs modernos e o HTML pronto para colar.
Gerando os ícones no seu dispositivo…
Como fica de verdade
aba do navegador
favoritos, retina
tela inicial iOS
Os dois primeiros estão em tamanho real. Se o desenho sumir em 16 px, simplifique o traço antes de publicar.
Fundo
- favicon.ico
- -
- Pacote .zip
- -
- Arquivos
- -
Cole no seu <head>
São quatro linhas, não quinze. Os navegadores atuais escolhem sozinhos
a resolução certa dentro do .ico.
Veja por que o resto virou ruído.
O que é um favicon (e por que um arquivo só não basta)
Favicon é o ícone que identifica o seu site na aba do navegador, na lista de favoritos, no histórico e nos resultados de busca do Google. O nome vem de "favorite icon", da época em que o Internet Explorer 5 leu pela primeira vez um arquivo chamado favicon.ico na raiz do site. Trinta anos depois ele continua sendo o denominador comum, só que sozinho já não basta. O iPhone quer um PNG de 180 pixels, o Android lê os ícones pelo Web App Manifest e o Google recomenda que o favicon tenha pelo menos 48 pixels de lado para aparecer bem nos resultados de busca.
O que confunde quem está montando isso pela primeira vez é que o .ico não é uma imagem, é um contêiner. Um único favicon.ico guarda várias resoluções ao mesmo tempo, e cada navegador pega a que serve para o contexto dele: 16 px na aba, 32 px em tela de alta densidade, 48 px no atalho da área de trabalho. Um .ico com uma resolução só obriga o navegador a redimensionar por conta própria, e o resultado costuma ser um borrão. Por isso esta ferramenta escreve os três tamanhos dentro do mesmo arquivo.
Aqui você escolhe uma imagem, seja PNG, SVG, JPG, WebP ou GIF, e recebe o pacote inteiro: o favicon.ico com 16, 32 e 48 px, os PNGs de 32, 180, 192 e 512 px, o site.webmanifest com os ícones já referenciados e o bloco de tags para colar no <head>. Tudo é gerado dentro do seu navegador, em poucos segundos e sem cadastro. Nenhum byte da sua imagem sai do dispositivo, o que conta quando o arquivo é o logo de um cliente que ainda nem foi lançado.
Como funciona a conversão
- Escolha a imagem do logo. O ideal é um PNG quadrado com fundo transparente. SVG também funciona e ainda entra no pacote como /icon.svg, que é a versão que fica nítida em qualquer tela.
- Ajuste o fundo. Deixe transparente se o desenho já se vira sobre qualquer cor, ou escolha uma cor sólida no seletor. Dá para arredondar os cantos também, de 0% (quadrado) até 50% (círculo perfeito).
- Olhe as prévias de 16 e 32 pixels, que aparecem em tamanho real dentro de uma aba de navegador simulada. É aqui que a maioria dos logos entrega o problema: o que parece ótimo em 512 px vira uma mancha cinza em 16 px.
- Cada tamanho é desenhado separadamente e salvo em PNG. O favicon.ico é montado juntando 16, 32 e 48 px dentro de um arquivo só, na estrutura que o formato ICO exige.
- Baixe o pacote em ZIP e descompacte tudo na raiz pública do site, a mesma pasta do index.html. Se preferir, o botão ao lado baixa só o favicon.ico.
- Cole no <head> o bloco de quatro linhas que aparece na tela. São quatro, não quinze: hoje se declara o .ico, o SVG, o apple-touch-icon e o manifesto, e o resto fica por conta do navegador.
Para que serve
- Site novo entrando no ar Você acabou de subir o projeto e a aba ainda mostra aquele ícone genérico de documento. Em trinta segundos sai o pacote completo, com o manifesto e o apple-touch-icon que o Lighthouse cobra na auditoria de PWA.
- Troca de identidade visual A marca mudou e o favicon antigo ficou para trás em cinco arquivos espalhados. Gere tudo de novo a partir do logo novo e substitua a pasta inteira de uma vez, com os nomes já batendo com as tags.
- Teste de legibilidade do logo Antes de fechar a identidade visual, veja como o símbolo se comporta em 16 pixels. Se o traço some ou as letras viram um borrão, ainda dá tempo de simplificar o desenho enquanto ele está no papel.
- Aplicativo web instalável Para o navegador oferecer a instalação do PWA, o manifesto precisa dos ícones de 192 e 512 pixels. Eles saem prontos aqui, já referenciados no site.webmanifest gerado.
Perguntas frequentes
Por que o favicon.ico precisa ter 16, 32 e 48 px juntos?
Porque o .ico é um contêiner, não uma imagem: ele guarda várias resoluções e deixa o navegador escolher a que serve para cada contexto. A aba usa 16 px, tela de alta densidade e barra de favoritos usam 32 px, e o atalho na área de trabalho do Windows usa 48 px. Com um tamanho só, o navegador redimensiona por conta própria e quase sempre fica borrado. O Google ainda recomenda que o favicon tenha pelo menos 48 px de lado para ser exibido bem nos resultados de busca, e é daí que vem o terceiro tamanho.
Consigo converter PNG para ICO, ou JPG e WebP também servem?
Todos servem. A entrada aceita PNG, SVG, JPG, WebP, GIF e BMP, e a saída é sempre .ico e PNG. A conversão de PNG para ICO (ou "png para icon", como muita gente digita) é só o caso mais comum. O melhor material de partida é um PNG quadrado com fundo transparente ou um SVG. JPG funciona, mas como o formato não tem canal de transparência, o fundo da foto vai aparecer no ícone. Nesse caso, use a opção de cor sólida para pelo menos deixar o resultado consistente.
Meu logo fica ilegível em 16 pixels. O que fazer?
Isso é normal e não é culpa da conversão: 16 por 16 pixels dão 256 pixels no total, menos que um caractere de texto desta frase. Logo com texto, traço fino ou muito detalhe não sobrevive a essa redução. A saída é desenhar uma versão só para ícone, normalmente com o símbolo sozinho, sem o nome da empresa, traço mais grosso e no máximo duas ou três cores. Use as prévias em tamanho real desta página para testar cada tentativa antes de publicar.
Devo deixar o fundo transparente ou colorido?
Transparente funciona bem na aba do navegador, que fica clara ou escura conforme o tema, e deixa o ícone se adaptar. Tem uma exceção importante: o iOS não respeita transparência no ícone da tela inicial e transforma o que for transparente em preto. Por isso, quando você escolhe transparente aqui, só o apple-touch-icon sai com fundo branco. Os outros arquivos mantêm a transparência. Se o seu logo é claro e some em fundo branco, escolha uma cor sólida.
Preciso mesmo do site.webmanifest?
Precisa se você quer que o site possa ser instalado como aplicativo, ou se o Lighthouse está reclamando na auditoria. O manifesto é uma especificação do W3C: um JSON que conta ao sistema operacional o nome do site, as cores e os ícones do atalho. Sem ele, o Android estica o favicon no atalho da tela inicial, e o resultado é feio. Se o seu site é uma página institucional simples e você não quer nada disso, apague o arquivo e a linha do manifest. As outras três tags continuam funcionando.
Troquei o favicon e o navegador insiste em mostrar o antigo
Navegador guarda favicon em cache de um jeito bem mais agressivo que o resto do site, às vezes por semanas. Primeiro force uma recarga com Ctrl+Shift+R (Cmd+Shift+R no Mac). Se não resolver, abra o arquivo direto pelo endereço, tipo seusite.com/favicon.ico, e recarregue essa aba, o que costuma limpar a entrada antiga. Em último caso, publique o arquivo com um nome novo e ajuste o href da tag.
A imagem é enviada para algum servidor?
Não. A leitura da imagem, a geração de cada tamanho, a montagem do .ico e o empacotamento do ZIP acontecem inteiramente no seu navegador, com o processador do seu dispositivo. Dá para confirmar: abra as ferramentas de desenvolvedor, vá na aba de rede e gere um favicon. Não aparece envio nenhum. E a ferramenta é gratuita, sem cadastro, sem limite de uso e sem marca d’água.
Ferramentas relacionadas
Fontes
Os limites e formatos aplicados por esta ferramenta vêm das especificações oficiais abaixo, não de terceiros:
- Icons: documentação de recursos de ícone da Microsoft Descreve a estrutura do formato ICO usada por esta ferramenta: o cabeçalho ICONDIR de 6 bytes, os ICONDIRENTRY de 16 bytes e a convenção de que o byte de dimensão com valor 0 significa 256 pixels.
- Favicon nos resultados da Pesquisa Google (Search Central) De onde vem a recomendação de gerar também o tamanho de 48 px. O Google pede um favicon quadrado, com no mínimo 8 px de lado e de preferência acima de 48 px, para exibir nos resultados de busca.
- Web Application Manifest: especificação do W3C Define os campos do site.webmanifest gerado aqui: name, short_name, icons com src/sizes/type/purpose, theme_color, background_color e display.
- Link type "icon": especificação HTML do WHATWG Especifica como o navegador escolhe entre os ícones declarados no <head> e por que o atributo sizes é uma dica, não uma ordem. É a razão de um .ico com várias resoluções ainda ser útil.
Termos relacionados
Esta página responde a quem procura por: