Tamanhos de favicon: quais arquivos você precisa e com quantos px

Por que existem tantos arquivos de favicon?

O favicon é o pequeno ícone do seu site: aparece na aba do navegador, na lista de favoritos, nos resultados de busca e na tela inicial do celular. É o rosto do site — sem ele, algo parece inacabado.

O problema é que cada um desses lugares exige um tamanho e um formato diferentes. Por isso o favicon não é um arquivo, e sim um pequeno conjunto deles.

O conjunto de que você precisa

• •favicon.ico — 16, 32 e 48px em um único arquivo. Usado pela barra de endereços, abas e favoritos; o padrão mais antigo e ainda essencial
• •PNG de 16px e 32px — as versões nítidas que os navegadores modernos usam nas abas
• •apple-touch-icon de 180px — usado ao adicionar o site à tela inicial do iPhone ou iPad
• •PNG de 192px e 512px — para a tela inicial do Android e instalações PWA, registrados no site.webmanifest

Como preparar a imagem original

O certo é partir de uma imagem quadrada grande (512px ou mais) e reduzir. Ampliar uma imagem pequena só a deixa borrada.

Ela precisa continuar reconhecível a 16px, então quanto mais simples, melhor. Um símbolo vale mais que um logotipo cheio de texto; uma pequena margem nas bordas evita o aspecto apertado, e o fundo transparente fica bem no tema claro e no escuro.

Como colocar no HTML

Envie os arquivos para a pasta raiz do site e aponte para eles com tags link no head: rel="icon" para o ICO e os PNG, rel="apple-touch-icon" para o ícone de 180px e rel="manifest" para o site.webmanifest.

Como reserva, a maioria dos navegadores encontra um favicon.ico colocado na raiz mesmo sem tag nenhuma. Mas para os PNG por tamanho e os ícones de tela inicial funcionarem direito, adicione as tags.

Não monte o conjunto na mão

Redimensionar imagem por imagem e empacotar o ICO manualmente dá trabalho. Solte uma única imagem no gerador de favicons do Image Converter NOW e receba favicon.ico, todos os PNG, site.webmanifest e as tags HTML prontas para colar — tudo em um único ZIP.

Tudo é processado no navegador: seu logotipo nunca é enviado a um servidor.