Converter PNG para ICO

Por que um ICO com vários tamanhos?

O favicon aparece em vários lugares e em tamanhos diferentes: 16 px na aba do navegador, 32 px nos favoritos e na barra de tarefas do Windows, 48 px ou mais em atalhos e sites fixados. Um único PNG pequeno fica borrado quando é ampliado e perde detalhes quando é reduzido. O arquivo .ico resolve isso reunindo vários tamanhos já prontos num só arquivo, e o navegador ou o sistema escolhe o melhor.

Preparando a imagem de origem

• Quadrada. Ícones são quadrados; recorte o logotipo na proporção 1:1 antes de converter.
• Grande o bastante. 256 × 256 px ou mais, para que o maior tamanho dentro do ICO fique nítido. Um SVG é ideal, porque é renderizado com perfeição em qualquer tamanho.
• Fundo transparente. Use um PNG ou SVG com transparência para o ícone combinar com os temas claro e escuro do navegador.
• Simples. Em 16 px, um logotipo completo com slogan fica ilegível. Use o símbolo ou a primeira letra da sua marca.

Se o seu logotipo é um SVG e você também precisa de versões em PNG, exporte-as com SVG para PNG. Se a imagem de origem for muito grande, dá para reduzi-la antes com Redimensionar imagem.

Usando o seu favicon

1. Renomeie o arquivo baixado para favicon.ico.
2. Envie-o para a pasta raiz do site (para que fique disponível em seusite.com.br/favicon.ico).
3. Adicione esta linha dentro do <head> das páginas:

<link rel="icon" href="/favicon.ico" sizes="any">

Criadores de sites como WordPress, Shopify, Squarespace e Wix têm uma opção de “Ícone do site” ou “Favicon” em que você pode enviar o arquivo. Os navegadores guardam favicons em cache por muito tempo: se o ícone novo não aparecer, abra o site numa janela anônima.

Problemas comuns

• O ícone aparece borrado na aba. A imagem de origem era pequena ou detalhada demais. Use uma imagem maior e mais simples, de preferência um SVG.
• O ícone tem um quadrado branco ou preto em volta. A imagem de origem não tinha transparência (muitas vezes um JPG). Use um PNG com fundo transparente.
• O ícone antigo continua aparecendo. Limpe o cache ou teste numa janela anônima; os navegadores guardam favicons por bastante tempo.

Ícones do Windows

O mesmo arquivo .ico funciona no Windows: clique com o botão direito num atalho ou pasta, escolha Propriedades → Personalizar ou Alterar Ícone e procure o seu arquivo.

Privado e grátis

Sem conta, sem marca d’água e sem upload: o ícone é gerado direto no navegador a partir da sua imagem, então o logotipo de uma marca ainda não lançada fica no seu computador.