Introdução
Você lançou um site, mas a aba do navegador mostra um ícone genérico em vez do seu logo. Esse detalhe pequeno faz diferença na identidade visual e no profissionalismo do seu site. Um favicon personalizado precisa de um arquivo ICO para máxima compatibilidade e alguns PNGs adicionais para dispositivos modernos. Neste guia passo a passo a gente mostra como criar favicon personalizado a partir do seu logo, converter png para ico e instalar tudo no seu site sem complicação.
Por que isso acontece
O favicon é o ícone pequeno que aparece na aba do navegador ao lado do título do site. Embora navegadores modernos aceitem PNG como favicon, o ICO continua sendo o formato mais universalmente compatível, inclusive com versões antigas do Internet Explorer e certos contextos do Windows. Um arquivo ICO bem feito contém vários tamanhos da mesma imagem (16x16, 32x32, 48x48, 256x256), permitindo que o navegador escolha o tamanho certo para cada contexto: aba, favorito, atalho de desktop, etc. Sem favicon, o navegador mostra um ícone genérico de globo, o que passa uma impressão amadora. Com favicon personalizado, seu site ganha identidade e fica mais fácil do usuário reconhecer sua aba entre dezenas de outras abertas.
3 soluções
Solução 1: Usar um conversor online de PNG para ICO. O conversor de piczen de png para ico é o caminho mais direto. Você sobe seu logo PNG quadrado, a ferramenta embute vários tamanhos num arquivo ICO e você baixa pronto para usar. Não precisa instalar nada e funciona em qualquer dispositivo. Ideal para a maioria dos sites que só precisa de um favicon básico compatível com todos os navegadores.
Solução 2: Usar RealFaviconGenerator para cobertura total. Essa ferramenta gratuita gera não só o ICO mas também PNGs para Apple touch, ícones Android, manifest e tags HTML prontas. É a opção mais completa se você quer que seu site apareça bem em todos os dispositivos: iOS, Android, Windows, MacOS. A contrapartida é que você precisa subir vários arquivos no seu servidor.
Solução 3: Gerar manualmente no Photoshop ou GIMP. Se você é designer e quer controle total sobre cada tamanho, dá para exportar manualmente cada versão. O Photoshop precisa de um plugin para exportar ICO, e o GIMP suporta nativamente. É trabalhoso mas permite otimizar a versão 16x16 pixel a pixel para máxima legibilidade.
Guia passo a passo
Comece preparando seu logo. Ele deve ser quadrado, idealmente 512x512 pixels em PNG. Se não for quadrado, recorte antes. Quanto mais simples o logo, melhor ele vai aparecer em 16x16, onde detalhes pequenos somem. Abra o conversor de png para ico no navegador. Arraste seu PNG para a página. A ferramenta permite escolher quais tamanhos embutir no ICO: marque 16, 32, 48 e 256. Clique em Converter e baixe o arquivo favicon.ico. Suba o arquivo na raiz do seu site (mesma pasta do index.html). Adicione a seguinte tag no head do seu HTML: link rel="icon" type="image/x-icon" href="/favicon.ico". Para cobertura moderna, adicione também um PNG de 180x180 para Apple touch: link rel="apple-touch-icon" href="/apple-touch-icon.png", e um de 192x192 para Android. Limpe o cache do navegador e atualize seu site. O favicon deve aparecer na aba. Se não aparecer, confira que o arquivo está na raiz e que o caminho na tag está correto.
Vantagens e desvantagens
Um favicon personalizado dá identidade ao seu site e melhora o reconhecimento de marca. Usuários que têm muitas abas abertas conseguem achar a sua pelo ícone, e favoritos com favicon ficam mais profissionais. O processo inteiro leva uns 10 minutos e não precisa de software pago. A contrapartida é que o ICO é um formato antigo e os editores modernos não lidam bem com ele, por isso um conversor online é tão útil. Outra desvantagem menor é que você precisa adicionar várias tags HTML e subir vários arquivos se quiser cobertura total em todos os dispositivos. Para a maioria dos sites, no entanto, um ICO na raiz e uma tag link resolvem. O esforço é pequeno comparado com o ganho de profissionalismo.