Pular para o conteúdo
ImageConverter

Conversão segura no servidor

Gerador de favicon

Transforme uma única imagem num conjunto completo de favicon. Você recebe um favicon.ico com vários tamanhos, os tamanhos PNG que navegadores e celulares esperam, um manifesto web e o código HTML exato para colar nas suas páginas, tudo num ZIP. Faz tempo que um favicon não é um arquivo só, e esta ferramenta gera todas as peças em vez de deixar você descobrir quais precisa.

Excluído automaticamente Arquivos excluídos em até 30 minutos

Arraste e solte sua imagem PNG aqui

Adicione várias de uma vez. Cada arquivo é processado e depois excluído do nosso servidor.

Até 20 MB por arquivo Aceita lotes

Passo a passo

Como usar esta ferramenta em 4 passos

  1. Adicione seu logotipo

    Funciona melhor quadrado, de preferência com 512×512 ou mais. Servem PNG, JPG, WebP e SVG; um SVG é o ideal, porque é renderizado nítido em qualquer tamanho.

  2. Espere um instante enquanto o conjunto é gerado

  3. Baixe o ZIP e descompacte

  4. Envie todos os arquivos para a raiz do seu site

    Envie todos os arquivos para a raiz do seu site e cole o código do README incluído no seu <head>.

Bom saber

Sobre este formato

Houve um tempo em que um favicon era um único arquivo de 16×16 chamado favicon.ico na raiz do site. Isso ainda funciona, e ainda fica feio em quase todo lugar, porque os lugares em que um ícone aparece se multiplicaram.

O que vem no arquivo, e por que cada coisa existe:

  • favicon.ico: o arquivo clássico, com versões de 16, 32, 48 e 256 pixels num só. Os navegadores o procuram automaticamente, o Windows o usa para atalhos, e muitas ferramentas de prévia de links e de feeds RSS esperam por ele.
  • favicon-16x16.png e favicon-32x32.png: os navegadores modernos preferem PNG quando ele é oferecido, e 32 é o que uma aba de alta densidade usa.
  • apple-touch-icon.png (180×180): a tela de início do iOS. Sem ele, quem salva o seu site num iPhone recebe uma captura borrada em vez do seu logotipo.
  • android-chrome-192x192.png e 512x512: telas de início e telas de abertura do Android.
  • site.webmanifest: diz ao Android que ícones usar e como exibir o seu site quando ele é salvo. Abra e preencha o nome do seu site, que deixamos em branco porque não o conhecemos.
  • README.txt: onde vai cada arquivo e o código que precisa ser colado. Ele vem junto porque os arquivos não servem para nada sem ele, e porque quem abrir este arquivo daqui a seis meses não vai ter esta página na frente.

Geradores antigos produzem vinte arquivos ou mais para dispositivos que não existem mais: imagens de bloco do Windows, uma dúzia de tamanhos da Apple, browserconfig.xml. Este conjunto é pequeno de propósito: cobre todos os contextos que ainda importam na prática.

Qualidade

Qualidade e tamanho do arquivo

A imagem de origem importa mais que qualquer ajuste, e três coisas nela decidem se o resultado fica bom.

Comece com algo grande, ou com um vetor. Um SVG é o ideal, porque cada tamanho é renderizado a partir das formas em vez de redimensionado a partir de um bitmap. Senão, use 512×512 ou mais: só o ícone do Android já precisa de 512.

Faça quadrado. Os ícones são quadrados em todo lugar em que aparecem. Um logotipo largo vai ser encaixado num quadrado com espaço em volta e parecer pequeno e perdido. Recorte antes em quadrado ou crie uma marca quadrada.

Simplifique. É o que a maioria pula, e importa mais que a resolução. Em 16×16 você tem 256 pixels no total: o logotipo completo de uma empresa com o slogan fica ilegível, por melhor que seja o original. Repare nos favicons dos sites que você usa todo dia: quase todos são uma única letra, uma marca simples ou uma forma forte, e bem mais simples que o logotipo real da mesma empresa.

Se o seu logotipo é detalhado, faça uma versão simplificada separada para o ícone. É o normal e é o que as grandes organizações fazem.

A transparência é mantida. Normalmente é o que você quer: um ícone com fundo branco embutido aparece como um quadrado branco num navegador com tema escuro.

Instalar o conjunto de ícones

Envie tudo para a raiz do seu site, para que os arquivos fiquem disponíveis em https://example.com/favicon.ico e assim por diante. Subpastas não funcionam: os navegadores procuram especificamente /favicon.ico, e os caminhos do manifesto partem da raiz.

Depois, acrescente isto ao seu <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Por fim, abra site.webmanifest e preencha name e short_name.

«Enviei e nada mudou»

É de longe o problema mais comum, e quase nunca são os arquivos.

Os navegadores guardam favicons em cache de forma muito agressiva, muitas vezes mais que qualquer outro recurso, e às vezes ignoram completamente um recarregamento normal. Antes de concluir que algo está errado:

  • Tente um recarregamento forçado, uma janela anônima ou um navegador com que você nunca visitou o site.
  • Abra o arquivo diretamente (https://example.com/favicon.ico) para confirmar que ele realmente está lá e sendo servido.
  • Dê tempo. Alguns navegadores só verificam o ícone de novo depois de um tempo, ou depois de reiniciar.

Se o arquivo abre diretamente mas a aba continua mostrando o ícone antigo, é o cache. Se o arquivo dá erro 404, está no lugar errado.

Também quer um ícone SVG?

Os navegadores modernos aceitam um favicon SVG, que continua nítido em qualquer tamanho e pode se adaptar ao modo escuro:

<link rel="icon" href="/icon.svg" type="image/svg+xml">

É um bom complemento, não um substituto. Mantenha o ICO como reserva: atalhos do Windows, navegadores antigos e muitas ferramentas de terceiros ainda procuram por ele.

Além dos sites

O favicon.ico deste arquivo é um ícone normal do Windows com vários tamanhos, então também serve para ícones de aplicativos, atalhos da área de trabalho e ícones de pastas. Onde o Windows mostrar um ícone, ele escolhe o tamanho que melhor combina com a visualização, que é justamente por isso que o arquivo contém quatro.

Privacidade

O que acontece com seu arquivo

Esta ferramenta funciona no nosso servidor, então dá o mesmo resultado em qualquer celular ou computador. Seu arquivo é enviado, e é exatamente isto que acontece com ele:

  • Guardado fora da área pública do servidor com um nome aleatório, nunca com o nome do seu arquivo.
  • É processado, e o arquivo original é excluído imediatamente, tenha a conversão funcionado ou não.
  • O resultado fica atrás de um link assinado que só você recebe, que para de funcionar depois de 20 minutos, e o arquivo é excluído assim que você o baixa.
  • O que nunca for baixado é excluído automaticamente em até 30 minutos.
  • A imagem em si nunca é registrada nem guardada. Se uma conversão falhar, anotamos os formatos envolvidos e o erro, não o arquivo.
  • Os metadados da câmera, incluindo as coordenadas GPS que registram onde a foto foi tirada, são removidos do resultado. Só é mantida a rotação necessária para mostrar a imagem na posição certa.

Perguntas e respostas

Gerador de favicon: perguntas frequentes

Qual deve ser o tamanho da minha imagem de origem?

512×512 ou mais, e quadrada. Um SVG é ainda melhor, porque cada tamanho é renderizado a partir das formas em vez de redimensionado a partir dos pixels. Só o ícone do Android já precisa de 512, então qualquer coisa menor vai ser ampliada.

Que arquivos eu preciso enviar de fato?

Todos, para a raiz do seu site, não para uma subpasta. Os navegadores procuram especificamente /favicon.ico, e o manifesto aponta para os ícones do Android com caminhos relativos à raiz. O README incluído explica para que serve cada arquivo.

Enviei os arquivos, mas meu navegador continua mostrando o ícone antigo.

Quase certamente é o cache, não os arquivos. Os navegadores guardam favicons em cache de forma muito agressiva e às vezes ignoram um recarregamento normal. Tente uma janela anônima ou um navegador com que você não visitou o site, e abra /favicon.ico diretamente para confirmar que ele está sendo servido. Se abre mas a aba não atualiza, é o cache; se dá 404, está no lugar errado.

Por que meu logotipo fica borrado em tamanhos pequenos?

Porque em 16×16 você tem 256 pixels no total, e nenhuma resolução resolve isso. Faça uma versão simplificada para o ícone: uma única letra, uma marca simples ou uma forma forte. Repare nos favicons dos sites que você usa todo dia: quase todos são bem mais simples que o logotipo real da empresa.

Ainda preciso do favicon.ico se tenho ícones PNG?

Sim, mantenha. Os navegadores pedem /favicon.ico automaticamente mesmo sem tag de link, e atalhos do Windows, navegadores antigos e muitas ferramentas de feeds RSS e prévias de links procuram especificamente por ele. Os PNGs são o que os navegadores modernos preferem quando recebem os dois.

Por que tão poucos arquivos? Outros geradores produzem vinte ou mais.

Porque a maioria deles foi pensada para dispositivos que não existem mais: imagens de bloco do Windows, uma dúzia de tamanhos antigos da Apple, browserconfig.xml. Estes seis cobrem todos os contextos que ainda importam, e um conjunto menor é mais fácil de instalar corretamente.

Continue explorando

Ferramentas de imagem relacionadas

Ver todas as ferramentas

Converter PNG para ICO

Converta PNG num ICO com vários tamanhos do jeito certo, com versões de 16, 32, 48 e 256 pixels. A transparência é mantida.

No nosso servidor

Converter ICO para PNG

Converta arquivos ICO do Windows para PNG mantendo a transparência. Extrai a maior imagem que o ícone contém.

No nosso servidor

Converter SVG para PNG

Converta SVG para PNG em qualquer resolução, com a transparência intacta. É renderizado a partir do vetor, então as bordas ficam nítidas em qualquer tamanho.

No nosso servidor

Redimensionar imagem

Mude uma imagem para qualquer tamanho em pixels. Mantenha as proporções ou defina as duas medidas, com atalhos para redes sociais. Grátis e sem cadastro.

No nosso servidor