Introdução
Você acabou de lançar um site novo, desenhou um logo limpo em PNG e tudo parece ótimo até perceber que a aba do navegador mostra um ícone de globo genérico em vez do seu logo. Esse ícone pequeno se chama favicon e, para ele aparecer de forma confiável em todos os navegadores, antigos e modernos, você precisa de um arquivo ICO. O PNG funciona em navegadores modernos, mas o ICO continua sendo a opção mais segura para compatibilidade total. Neste guia a gente conta por que o ICO ainda é relevante, como converter png para ico grátis online e quais tamanhos você precisa dentro desse arquivo ICO para ficar nítido em qualquer lugar.
Por que isso acontece
ICO é um formato de imagem legado desenvolvido pela Microsoft nos anos 80 para os ícones do Windows. Apesar da idade, continua sendo o formato de favicon com maior suporte universal. Navegadores como Chrome, Firefox, Safari e Edge leem favicons ICO, e também fazem isso navegadores antigos como Internet Explorer. O truque do ICO é que um único arquivo pode conter vários tamanhos da mesma imagem, normalmente 16x16, 32x32, 48x48 e 256x256 pixels. Quando o navegador precisa do favicon para uma aba, pega o de 16x16. Quando o Windows precisa de um ícone de desktop, pega tamanhos maiores. Se você só embute um tamanho, seu favicon fica borrado ou pixelado em certos contextos. Um arquivo ICO bem feito empacota todos os tamanhos juntos para o navegador escolher o certo automaticamente.
3 soluções
Solução 1: Usar um conversor online de PNG para ICO. O conversor de piczen de png para ico pega seu logo PNG, embute vários tamanhos num arquivo ICO e deixa baixar grátis. Sem instalação. É o caminho mais rápido para a maioria dos donos de site porque gerencia o embutir de tamanhos automaticamente, funciona em qualquer dispositivo com navegador e produz um arquivo ICO compatível com todos os navegadores, de Chrome a Internet Explorer. Também dá para converter vários logos num lote só se você gerencia vários sites.
Solução 2: Gerar favicons com RealFaviconGenerator. Suba seu PNG e produza um ICO mais ícones PNG, ícones Apple touch e arquivos manifest para cada plataforma. Ótimo para suporte multiplataforma completo, já que também gera as tags HTML que você deve adicionar ao head do seu site. É a melhor opção se quer cobertura integral em iOS, Android, Windows e navegadores antigos.
Solução 3: Converter no Photoshop ou GIMP. Ambos conseguem exportar ICO com o plugin certo. O melhor se você já tem o software aberto e quer controle total sobre cada tamanho, já que dá para otimizar manualmente a versão 16x16 para máxima legibilidade em tamanhos minúsculos. O lado ruim é que os plugins de ICO nem sempre são confiáveis e montar o fluxo leva tempo se você só precisa de um favicon.
Guia passo a passo
Comece com um PNG quadrado do seu logo, idealmente de 512x512 pixels para o conversor ter muita resolução com que trabalhar. Se seu logo não é quadrado, recorte antes com qualquer editor, já que imagens não quadradas produzem favicons distorcidos. Abra o conversor de png para ico no seu navegador. Arraste seu PNG para a página. A maioria das ferramentas permite escolher quais tamanhos embutir, o conjunto padrão é 16, 32, 48 e 256 pixels. Clique em Converter e baixe o arquivo ICO resultante. Chame de favicon.ico e suba na raiz do seu site. Adicione uma tag link no head do seu HTML apontando para ele, tipo link rel="icon" href="/favicon.ico" type="image/x-icon". Limpe o cache do navegador ou atualize com força e seu logo deve aparecer na aba. Para melhores resultados, adicione também uma versão PNG de 180x180 para ícones Apple touch e uma de 192x192 para Android, já que dispositivos modernos esperam esses tamanhos adicionais para atalhos na tela inicial.
Vantagens e desvantagens
Um favicon ICO dá suporte universal de navegador, incluindo versões antigas que ignoram favicons PNG. Empacotar vários tamanhos num único arquivo significa que o navegador sempre escolhe a versão mais nítida para o contexto, seja um ícone de aba de 16x16 ou um atalho de desktop de 256x256. A contrapartida é que ICO é um formato antigo com suporte de ferramentas limitado. A maioria dos editores de imagem modernos não consegue abrir nem editar arquivos ICO direto, por isso um conversor online é tão útil. Para sites novos, a melhor prática é publicar tanto um ICO para suporte legado quanto ícones PNG para dispositivos modernos, dando a cobertura mais ampla possível em todos os navegadores e sistemas operacionais. O processo inteiro leva uns 10 minutos e se nota toda vez que alguém visita seu site, já que um favicon profissional reforça o reconhecimento de marca e dá polimento ao seu site.