Artigo

Criando um favicon a partir de um PNG

Um favicon é um pequeno gráfico que os navegadores exibem em abas, favoritos e listas de histórico. Fazê-lo corretamente envolve mais do que redimensionar um logotipo: o formato .ico agrupa múltiplas resoluções em um arquivo, navegadores modernos preferem PNG, dispositivos móveis têm seu próprio apple-touch-icon e manifestos de aplicativos web precisam de seu próprio conjunto de ícones. Este artigo cobre cada peça e explica como produzir o conjunto completo a partir de um único PNG de origem.

Escrito por Bastien Sulyan · Publicado em 29 de junho de 2026

O que é um favicon e onde os navegadores o usam

A palavra favicon é uma contração de "favorite icon" (ícone favorito). Os navegadores o exibiram pela primeira vez na barra de endereços no Internet Explorer 5 (1999), depois o adotaram para favoritos. Hoje ele aparece em abas do navegador, na barra de ferramentas de favoritos, no histórico de navegação, na página de nova aba em alguns navegadores e nas barras de tarefas do sistema operacional quando um site é fixado. No mobile, se um usuário adicionar um site à tela inicial, o dispositivo usa uma imagem relacionada, mas distinta, chamada apple-touch-icon em vez do favicon padrão. Mecanismos de busca às vezes mostram favicons ao lado dos resultados em sua interface. O gráfico é pequeno por design, o que o torna eficaz para identificação visual rápida, mas também exigente para produzir bem: em 16x16 pixels, um logotipo detalhado se torna uma mancha indistinta. O arquivo favicon passou por vários formatos ao longo das décadas, com .ico permanecendo o mais amplamente compatível e PNG sendo agora o padrão moderno para a maioria dos navegadores.

O contêiner .ico: múltiplas resoluções em um arquivo

O formato .ico é um contêiner, não uma única imagem. Um único arquivo .ico pode conter múltiplas imagens bitmap em diferentes resoluções, cada uma armazenada como uma entrada separada em um índice no início do arquivo. Os três tamanhos mais comuns são 16x16, 32x32 e 48x48 pixels. Quando o Windows exibe um favicon no Explorer ou na barra de tarefas, ele escolhe a entrada que melhor corresponde ao contexto de exibição. Versões mais antigas do Windows precisavam de uma entrada 48x48 para slots de alta densidade na barra de tarefas. Os navegadores solicitam o favicon em 16x16 para abas, mas podem usar uma entrada maior se um display de alta densidade for detectado. Agrupar os três tamanhos em um único arquivo .ico significa que uma única requisição HTTP cobre todos os casos de uso. Distribuí-los como PNGs separados também é válido, mas requer tags link extras e adiciona requisições HTTP. As imagens internas dentro de um arquivo .ico são dados BMP ou PNG padrão, portanto o contêiner adiciona apenas um pequeno overhead de cabeçalho por entrada.

Projetando para tamanhos minúsculos: simplifique o ícone

Em 16x16 pixels você tem 256 pixels no total. Um logotipo típico com wordmark ou detalhes finos se torna ilegível nesse tamanho. A abordagem padrão é criar um ícone simplificado: uma única letra, uma forma abstrata ou um ícone que represente a marca sem depender de detalhes. Alguns problemas específicos a antecipar: traços finos desaparecem completamente em tamanhos pequenos, especialmente em telas não-retina. Pares de letras e detalhes de espaço negativo se fundem em ruído cinza. Gradientes mal se veem. O alto contraste entre o ícone e seu fundo é o único fator mais importante na legibilidade. Uma forma sólida sobre um fundo simples quase sempre lê melhor do que uma ilustração detalhada em 16x16. Os tamanhos 32x32 e 48x48 são mais tolerantes e podem suportar um pouco mais de detalhe, mas a versão 16x16 deve ser tratada como a restrição principal. Se o ícone ainda não lê em 16x16, o design precisa de mais simplificação.

O conjunto moderno: .ico, ícones PNG, apple-touch-icon, manifesto e tags HTML link

Uma configuração completa de favicon para um site público atualmente precisa de cinco coisas. Primeiro, um favicon.ico na raiz do site (navegadores solicitam /favicon.ico diretamente sem uma tag link como fallback). Segundo, um PNG 32x32 para navegadores de desktop modernos, declarado com uma tag link: `<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">`. Terceiro, um PNG 16x16 para o tamanho da aba: `<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">`. Quarto, um apple-touch-icon em 180x180 pixels para favoritos na tela inicial do iOS: `<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">`. Quinto, um manifesto de aplicativo web (site.webmanifest) com um PNG 192x192 e um 512x512 para Android e aplicativos web progressivos. A transparência é suportada em PNG e nas entradas codificadas como PNG dentro do .ico, embora o apple-touch-icon deva ter um fundo opaco porque o iOS ignora o canal alfa e preenche áreas transparentes com preto.

Fazendo localmente: o favicon-generator mantém sua imagem no seu dispositivo

O favicon-generator neste site recebe um PNG e produz o conjunto completo: um favicon.ico multirresolução com entradas 16x16, 32x32 e 48x48, os tamanhos PNG individuais para uso direto com tags link e o apple-touch-icon 180x180. Tudo isso acontece no seu navegador usando a Canvas API e um codificador .ico em JavaScript. Sua imagem de origem nunca é enviada para lugar nenhum; ela permanece no seu dispositivo. Isso importa quando o arquivo de origem é um logotipo de empresa ou qualquer ativo que não deve sair da sua máquina antes de você controlar para onde vai. Cada arquivo gerado é oferecido como um download individual, usando os nomes de arquivo convencionais. Você os copia para a raiz do seu site e adiciona as tags link correspondentes ao cabeçalho HTML. Se o seu logotipo de origem tem detalhes finos que não sobrevivem à renderização 16x16, você pode cortá-lo ou simplificá-lo antes de soltá-lo no gerador, ou fornecer uma imagem de origem diferente especialmente preparada para o favicon.

Ferramentas neste artigo

Perguntas frequentes

Ainda preciso de um favicon.ico se eu declarar tags link PNG?

Sim, por dois motivos. Primeiro, navegadores que não leem seu HTML (rastreadores web, leitores RSS, alguns navegadores móveis antigos) procuram /favicon.ico diretamente na raiz do domínio. Se esse arquivo estiver ausente, eles geram uma requisição 404 em cada carregamento de página, o que adiciona ruído aos logs do servidor e uma pequena viagem de ida desnecessária. Segundo, versões mais antigas do Internet Explorer reconhecem apenas o formato .ico e ignoram as tags link PNG. Fornecer ambos cobre todos os casos.

Posso usar um SVG como favicon?

Chrome e Firefox suportam favicons SVG via `<link rel="icon" type="image/svg+xml" href="/favicon.svg">`. O Safari não suporta favicons SVG. Como favicons SVG são independentes de resolução, parecem nítidos em qualquer densidade de exibição, incluindo telas retina, sem precisar de múltiplas variantes de tamanho. A recomendação prática é declarar a tag link SVG para navegadores que o suportam e ainda incluir o fallback .ico para cobertura completa. Favicons SVG também podem incluir uma media query `prefers-color-scheme` para alternar automaticamente entre versões clara e escura.

De qual imagem devo partir para obter o melhor resultado?

Um PNG quadrado em 512x512 ou maior com fundo transparente oferece mais flexibilidade. Começar grande e reduzir preserva mais detalhes do que começar de uma imagem pequena. Se seu logotipo principal inclui um wordmark, considere preparar uma versão simplificada separada mostrando apenas o ícone ou marca, porque o texto não será legível em 16x16 independentemente da resolução de origem. O alto contraste entre o ícone e seu fundo é o preditor mais confiável de se os tamanhos pequenos vão ler claramente.