Converta PNG para ICO e tenha um favicon nítido
Um favicon é a imagenzinha que dá a um site sua assinatura visual. Você o vê na aba do navegador ao lado do título da página, na sua lista de favoritos, no menu suspenso de histórico da barra de endereços e, às vezes, ao lado dos resultados de busca. Ele é pequeno, mas faz muito trabalho: um favicon reconhecível ajuda os usuários a achar a sua aba entre uma dúzia de outras e sinaliza que um site está pronto e bem cuidado. O formato clássico para esse ícone é o ICO, e a maneira mais fácil de criar um é partir de um PNG quadrado e limpo e convertê-lo.
Esta ferramenta pega uma imagem PNG e a transforma em um favicon ICO ali mesmo no seu navegador. A conversão roda localmente usando o seu próprio dispositivo, então a foto que você escolhe nunca é enviada a um servidor. Isso importa quando seu ícone é um logo ou ativo de marca que você prefere não entregar a terceiros. Quando o arquivo está pronto, basta baixar.
O que é o formato ICO e por que ele guarda vários tamanhos
O ICO é um formato de contêiner de ícones que surgiu no Microsoft Windows, onde armazena os ícones usados em programas, atalhos e pastas. Sua característica definidora, e o motivo de ter virado o padrão dos favicons da web, é que um único arquivo ICO pode guardar a mesma imagem em várias resoluções ao mesmo tempo. Em vez de um bitmap fixo, o arquivo empacota um pequeno conjunto de imagens quadradas e deixa o navegador ou o sistema operacional escolher o tamanho que serve ao lugar onde precisa desenhar o ícone.
Isso é genuinamente útil. Uma aba de navegador precisa de um ícone minúsculo, uma barra de favoritos pode usar um pouco maior, e um atalho fixado na área de trabalho pode pedir algo ainda maior. Com um ICO multitamanho, cada contexto pega a versão que lhe convém, então seu ícone permanece nítido em vez de ser ampliado a partir de um único bitmap pequeno e ficar borrado. O ICO também preserva a transparência, o que mantém os cantos de um logo redondo ou irregular limpos contra qualquer cor de aba.
Tamanhos de favicon recomendados
Para um favicon de site, os três tamanhos que vale incluir são 16x16, 32x32 e 48x48 pixels. A versão de 16 pixels é a que a maioria dos navegadores exibe na aba e na barra de endereços. A versão de 32 pixels é usada em telas de resolução mais alta e em algumas visualizações de favoritos e histórico, então mantém tudo nítido em telas modernas. A versão de 48 pixels cobre contextos maiores, como atalhos de site do Windows. Como todas vivem dentro de um único arquivo ICO, você entrega um só ativo e deixa cada superfície escolher o de que precisa.
Parta de um PNG quadrado para que nada estique. Se sua imagem de origem é retangular ou superdimensionada, recorte-a ou escale-a para um quadrado limpo primeiro com nosso redimensionador de imagens, depois execute a conversão. Um design simples e de alto contraste se lê muito melhor a 16 pixels que uma ilustração detalhada, então prefira formas marcantes a texto fino.
Como adicionar o favicon ao seu site
Depois de ter seu arquivo ICO, faça upload dele para o seu site, tradicionalmente na raiz como favicon.ico. Muitos navegadores vão encontrá-lo ali automaticamente, mas a boa prática é declará-lo explicitamente no cabeçalho do seu HTML para não deixar margem a adivinhação. Adicione uma tag de link assim:
<link rel="icon" type="image/x-icon" href="/favicon.ico">
Coloque essa linha dentro da seção <head> das suas páginas. O atributo rel="icon" diz ao navegador que este recurso é o ícone da página, e o href aponta para onde você guardou o arquivo. Se você usar um caminho relativo à raiz como o acima, a mesma declaração funciona em todas as páginas do seu site. Após publicar, talvez você precise dar um recarregamento forçado ou limpar o cache antes de o novo ícone aparecer, já que os navegadores guardam os favicons com afinco.
Conversão privada no seu navegador
Tudo acontece no seu dispositivo. O PNG que você escolhe é lido, decodificado e recodificado como ICO localmente, e nada sai da sua máquina durante o processo. Não há conta, não há fila e não há armazenamento no servidor, o que torna isso conveniente até para logos não lançados ou trabalho de cliente sob acordo. Para mais formas de preparar e organizar gráficos, explore nosso conjunto completo de ferramentas de imagem.
Perguntas frequentes
Minha imagem é enviada para algum lugar?
Não. O PNG é convertido em ICO inteiramente no seu navegador, no seu próprio dispositivo. Nada é enviado a um servidor e nada é armazenado, então sua imagem permanece privada.
Quais tamanhos meu favicon deve incluir?
Os tamanhos mais úteis são 16x16, 32x32 e 48x48 pixels. A imagem de 16 pixels é exibida nas abas do navegador, enquanto as maiores mantêm o ícone nítido em telas de alta resolução e atalhos de desktop.
Por que usar ICO em vez de apenas um PNG?
O ICO é o formato de favicon de longa data e pode armazenar vários tamanhos dentro de um arquivo. Os navegadores e o sistema operacional escolhem a resolução que serve a cada contexto, então o ícone permanece nítido em vez de ser escalado a partir de um único bitmap.
O ICO mantém a transparência do meu PNG?
Sim. O formato ICO suporta transparência, então as áreas vazadas do seu PNG são preservadas e o ícone se mistura de forma limpa com qualquer cor de aba ou fundo.
Como adiciono o favicon ao meu site?
Faça upload do arquivo ICO para o seu site, geralmente como favicon.ico na raiz, e adicione uma tag de link no cabeçalho do seu HTML como link rel icon type image x-icon href barra favicon.ico. Depois limpe o cache do navegador para vê-lo.
Minha imagem de origem não é quadrada. O que devo fazer?
Recorte ou escale-a para um quadrado primeiro para que não estique. Você pode usar nosso redimensionador de imagens para fazer um quadrado limpo, depois converter aquilo em ICO para o favicon de melhor aparência.