Como criar um favicon.ico a partir de um logotipo PNG
O favicon é o pequeno ícone que aparece nas abas do navegador, nos favoritos e nos resultados de busca ao lado do nome do seu site. Sem ele, os navegadores mostram um ícone genérico de página em branco, o que deixa o site com cara de inacabado.
Este guia mostra como transformar um logotipo PNG ou JPG em um favicon.ico de verdade e adicioná-lo a qualquer site.
De quais tamanhos um favicon precisa?
Os navegadores exibem favicons em tamanhos diferentes: 16×16 pixels nas abas, 32×32 em telas de alta resolução e em alguns favoritos, 48×48 no Windows e tamanhos maiores em atalhos.
Um arquivo ICO pode guardar vários tamanhos em um só arquivo, e o navegador escolhe o mais adequado. O PixShift cria automaticamente arquivos ICO com versões de 16, 32, 48 e 256 pixels.
Prepare sua imagem
- Use uma imagem quadrada. Se o seu logotipo não for quadrado, ele será centralizado com espaço transparente ao redor.
- Comece com pelo menos 256×256 pixels para que os tamanhos maiores fiquem nítidos.
- Mantenha o design simples. Textos pequenos e linhas finas desaparecem em 16 pixels, então uma única letra ou símbolo costuma funcionar melhor.
- Use PNG com fundo transparente se quiser que o ícone combine com abas claras e escuras do navegador.
Converta PNG para ICO
- Abra o conversor de PNG para ICO do PixShift.
- Solte seu logotipo na caixa. O arquivo ICO é criado na hora, no seu navegador.
- Baixe o arquivo e renomeie para favicon.ico.
Adicione o favicon ao seu site
- Envie o favicon.ico para a pasta raiz do seu site, para que ele fique disponível em https://seu-site.com/favicon.ico.
- Adicione a linha abaixo dentro da seção <head> das suas páginas.
- Recarregue o site. Se o ícone antigo ainda aparecer, limpe o cache do navegador ou abra o site em uma janela anônima; os navegadores guardam favicons em cache por muito tempo.
<link rel="icon" href="/favicon.ico" sizes="any">Ainda é preciso usar ICO nos navegadores modernos?
Os navegadores modernos também aceitam favicons em PNG e SVG. Mesmo assim, um favicon.ico na raiz do site continua sendo a opção mais compatível: algumas ferramentas, leitores de feed e navegadores antigos procuram exatamente esse arquivo. Muitos sites oferecem tanto um ICO quanto uma versão em SVG ou PNG.