Criar um favicon leva três passos: preparar uma imagem quadrada, convertê-la em um arquivo ICO e adicionar uma tag <link> ao seu HTML. A parte da conversão roda no seu navegador com nossos conversores de imagem para ICO — sem uploads, sem conta. O trabalho todo leva uns cinco minutos. Aqui vai cada passo com os detalhes que realmente importam.
O que um favicon realmente é
Um favicon é o pequeno ícone associado ao seu site. Ele aparece nas abas do navegador, nas listas de favoritos, no histórico de navegação e ao lado da URL em alguns navegadores. Com 16×16 pixels numa barra de abas, muitas vezes é a única identidade visual que um visitante vê quando já tem oito abas abertas.
O favicon clássico é um arquivo .ico, e o ICO tem uma propriedade que importa aqui: é um contêiner. Um único arquivo ICO pode guardar a mesma imagem em várias resoluções — tipicamente 16×16, 32×32 e 48×48 — e o navegador escolhe a certa para cada contexto. A barra de abas pega 16, uma tela retina pega 32, o diálogo de atalho do Windows pega 48. A mecânica do formato contêiner está no nosso mergulho técnico no formato ICO.
A convenção vem do Internet Explorer 5, em 1999, que pedia automaticamente /favicon.ico de todo site visitado. O nome do arquivo pegou. E o alcance do ícone cresceu desde então: o Google mostra favicons ao lado dos resultados na busca móvel, então esse quadrado de 16 pixels virou parte do seu snippet de busca, não só decoração de aba.
Passo 1: prepare a imagem de origem
A imagem de origem decide se o favicon fica nítido ou vira uma mancha. Três regras:
Deixe quadrada. Favicons são quadrados. Se o seu logotipo é largo, recorte ou complete até uma tela quadrada primeiro, senão a conversão vai espremê-lo.
Mantenha simples. Em 16×16, existem 256 pixels no total. Linhas finas, gradientes e texto pequeno se dissolvem em ruído. Uma forma única e marcante ou uma ou duas letras em peso pesado sobrevivem; uma ilustração detalhada, não. Teste reduzindo a imagem ao tamanho de uma miniatura — se você não a reconhece ali, uma aba de navegador também não vai.
Comece grande. Trabalhe com pelo menos 512×512. Reduzir esconde imperfeições; ampliar as inventa.
O formato do arquivo de origem quase não importa. Use PNG ou WebP se o seu ícone tem fundo transparente — JPG não guarda transparência, então as áreas transparentes sairiam achatadas sobre branco. Para um logotipo chapado sobre fundo sólido, JPG também serve.
Passo 2: converta a imagem para ICO
Arraste o arquivo de origem para o conversor que combina com o formato dele: PNG para ICO, JPG para ICO ou WebP para ICO. A ferramenta decodifica a imagem localmente no seu navegador, empacota os tamanhos padrão num único contêiner ICO e te entrega um arquivo para baixar. Nada é enviado; tudo roda na sua máquina.
O contêiner multi-tamanho é a razão para preferir ICO em vez de renomear um PNG. Um PNG de 512×512 linkado como favicon força o navegador a reduzi-lo na hora, e redução automática não é gentil com formas finas. Um ICO carrega versões pequenas e lapidadas, e o navegador simplesmente escolhe.
Quais tamanhos entram no arquivo, e quando você precisa de arquivos extras além do ICO, é um assunto à parte — nosso guia de tamanhos de favicon tem a tabela completa, incluindo os tamanhos de apple-touch-icon para a tela de início do iOS.
Passo 3: adicione ao seu site
Coloque o favicon.ico na raiz do seu site e adicione uma linha ao <head> das suas páginas:
<link rel="icon" href="/favicon.ico" sizes="any" />
A dica sizes="any" avisa ao navegador que o arquivo guarda várias resoluções — ele deve escolher a melhor em vez de assumir 16×16.
Colocar o arquivo em /favicon.ico importa além da tag link. Navegadores pedem esse caminho automaticamente para sites que não declaram nada, e ferramentas como leitores de feed e previews de crawler também procuram ali. Um favicon na raiz funciona até para páginas que esquecem a tag.
Navegadores modernos também aceitam favicons em PNG, declarados assim:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
Favicons em PNG são menores por arquivo e mais fáceis de gerar, mas a coroa da compatibilidade ainda é do ICO: funciona em todo navegador já lançado, é o formato que a requisição automática de /favicon.ico espera, e um único arquivo cobre todos os tamanhos. Servir os dois — ICO na raiz mais declarações PNG — é o cinto e suspensório com que a maioria dos sites termina.
Confira o resultado
Dê um refresh forçado na página (favicons ficam em cache agressivamente), depois olhe a aba, a barra de favoritos e o histórico. Se o ícone ficar borrado no tamanho da aba, a culpa quase nunca é do conversor — é da imagem de origem. Volte ao passo 1, simplifique a forma e converta de novo.
Seu arquivo de logotipo provavelmente está parado numa pasta agora mesmo. Arraste ele para o conversor, ligue a tag link — e sua aba deixa de ser um ícone de documento em branco.