Em 2026, ainda será necessário usar o arquivo favicon.ico?

Sim. Navegadores, rastreadores e leitores de feeds solicitam o arquivo /favicon.ico na raiz do seu site, seguindo uma convenção, sem analisar o seu código HTML. Portanto, se o arquivo estiver ausente, isso resultará em erros 404 e ícones em branco nesses contextos. Crie um arquivo ICO adequado, com vários tamanhos (16, 32 e 48 pixels), em vez de uma única versão, para que não seja necessário redimensioná-lo.

Por que o ícone do meu aplicativo aparece como um quadrado preto em iPhones?

O iOS preenche as áreas transparentes de um ícone do tipo "apple-touch" com uma cor preta sólida, em vez de usar um fundo neutro. Antes de exportar, aplique uma cor de fundo específica ao ícone. O gerador de favicon do FileTinker faz isso automaticamente, utilizando a cor de fundo que você selecionar. Além disso, ignore os cantos pré-arredondados, pois o iOS aplica sua própria máscara de canto.

Posso usar apenas um único arquivo SVG como favicon e dispensar os arquivos PNG?

Ainda não como seu único ícone. Os favicons em SVG são ótimos quando suportados – incrivelmente nítidos, pequenos e capazes de se adaptar ao modo escuro com uma consulta de mídia incorporada –, mas o suporte é inconsistente, sendo o Safari o navegador mais notório que ainda não oferece essa funcionalidade, e qualquer solicitação de `/favicon.ico` não encontrará um arquivo SVG. Utilize o SVG como um aprimoramento adicional ao conjunto de arquivos ICO e PNG, e não como um substituto.

Por que o Android precisa de um ícone de 512 pixels quando as guias têm apenas 16 pixels?

Os ícones do manifesto têm uma função diferente. A versão de 192 pixels se torna o ícone da tela inicial quando alguém adiciona seu site, e a versão de 512 pixels é usada no prompt de instalação e na tela de apresentação exibida durante o lançamento de um aplicativo web instalado, sendo exibida em tamanho grande em uma tela de alta densidade. Ele só é baixado quando realmente necessário.

Eu substituí o meu favicon, mas a versão antiga ainda aparece. Por quê?

Os favicons são armazenados em cache de forma intensa: os navegadores os mantêm por muito mais tempo do que as imagens comuns, às vezes por semanas. Verifique em uma janela anônima para confirmar se os novos arquivos foram carregados. Para visitantes frequentes, pode levar algum tempo, mas adicionar uma string de consulta de versão aos URLs dos ícones nas suas tags de link força o carregamento de uma nova versão.

Tamanhos e formatos de favicon em 2026: o que o seu site realmente precisa

5 de julho de 20267 min de leitura

Pesquise por dicas sobre como criar um favicon e você encontrará listas de verificação que exigem mais de vinte arquivos de ícone: um arquivo PNG para cada geração de iPad, imagens para os ícones do Windows, o arquivo browserconfig.xml e máscaras para ícones de abas fixas. A maior parte disso é um resquício de práticas ultrapassadas de 2014, para plataformas que já não são utilizadas ou que voltaram a usar ícones padrão. Em 2026, você precisará de seis arquivos de imagem, um arquivo de manifesto e cerca de cinco linhas de HTML. Isso cobre as abas do navegador, os favoritos, os resultados de pesquisa do Google, a tela inicial do iOS e o Android, incluindo aplicativos web instalados. Este guia explica quais arquivos são importantes, por que cada um deles existe, o que você pode excluir com segurança e como gerar todo o conjunto a partir de um único logotipo, sem precisar instalar nada ou enviar seus arquivos para qualquer lugar.

Onde o seu ícone realmente aparece.

Um favicon deixou de ser apenas um elemento decorativo em uma aba há muito tempo. Atualmente, esse pequeno conjunto de imagens é utilizado em locais que exigem um alto nível de qualidade visual, cada um com seu tamanho e formato preferidos.

As guias, favoritos e o histórico do navegador exibem seu ícone em 16x16 pixels CSS, com tamanho dobrado para 32x32 em telas de alta densidade. O Google exibe os favicons ao lado dos resultados da pesquisa, portanto, um ícone ausente ou de baixa qualidade faz com que sua listagem pareça menos confiável do que a do concorrente que aparece acima. Quando alguém salva seu site na tela inicial de um iPhone, o iOS usa seu ícone "apple-touch-icon" como o ícone completo do aplicativo. No Android, o Chrome usa seus ícones do manifesto para a mesma finalidade e, se seu site puder ser instalado como um aplicativo web, o ícone de 512 pixels se torna a imagem da tela de carregamento enquanto o aplicativo é carregado.

Essa é a lista completa de elementos que valem a pena serem projetados. Os blocos da tela inicial do Windows, os ícones de abas fixas do Safari e uma dúzia de resoluções de tela antigas do iPad não estão incluídos – mais informações sobre eles abaixo.

O pacote de 2026: sete arquivos, cinco linhas de HTML

Aqui está tudo o que um site comum precisa. Se uma lista de verificação indicar que você deve gerar mais do que isso, significa que está exagerando.

Os arquivos devem ser colocados no diretório raiz do seu site (o arquivo favicon.ico, em particular, deve estar lá). O código HTML consiste em algumas tags de link na seção `<head>`: uma para o arquivo ICO, uma para cada um dos dois arquivos PNG, uma tag `rel="apple-touch-icon"` e uma tag `rel="manifest"` que aponta para o arquivo `webmanifest`.

favicon.ico – um único arquivo ICO que contém versões de 16, 32 e 48 pixels. É um elemento fundamental para garantir a compatibilidade; mais informações sobre por que ele continua sendo usado podem ser encontradas abaixo.
favicon-16x16.png e favicon-32x32.png – imagens PNG de alta qualidade para a aba e a barra de favoritos em telas de resolução padrão e alta.
apple-touch-icon.png, com dimensões de 180x180 – o ícone para a tela inicial do iOS. Um único tamanho agora é compatível com todos os iPhones e iPads atuais; o iOS redimensiona-o quando necessário.
android-chrome-192x192.png e android-chrome-512x512.png – referenciados no arquivo de manifesto, utilizados para a tela inicial do Android, o seletor de aplicativos e a tela de apresentação durante a instalação.
site.webmanifest – um pequeno arquivo JSON que lista os dois ícones do Android, além do nome do seu aplicativo e a cor do tema. É necessário para que os ícones do Android sejam detectados e para que o site possa ser instalado.
Opcional: um favicon em SVG por meio de uma tag de link com o tipo image/svg+xml. Ele se adapta perfeitamente e pode alterar seu estilo para abas com tema escuro, utilizando uma consulta de mídia incorporada, mas mantenha as versões em PNG e ICO como alternativas.

Por que o favicon.ico se recusa a morrer

O formato ICO é um padrão do Windows da década de 1990, e, mesmo assim, abandoná-lo ainda seria um erro em 2026. A razão é que navegadores, rastreadores, leitores de RSS e inúmeros programas de coleta de dados solicitam o arquivo /favicon.ico na raiz do seu site, por convenção, sem sequer analisar o seu código HTML – qualquer registro de servidor web mostra um fluxo constante dessas solicitações. Se o arquivo estiver ausente, eles receberão um erro 404 e o seu ícone aparecerá em branco nesses contextos.

O formato também possui um recurso interessante: um único arquivo .ico é um contêiner que pode armazenar vários tamanhos ao mesmo tempo. Um arquivo favicon.ico adequado contém internamente imagens de 16, 32 e 48 pixels, e o programa que o lê seleciona a imagem que melhor se adapta, em vez de redimensionar uma imagem de tamanho incorreto, o que resultaria em uma imagem distorcida. É por isso que um arquivo favicon.ico convertido a partir de um único arquivo PNG em um único tamanho representa uma perda de qualidade – as imagens menores são redimensionadas dinamicamente e perdem a nitidez.

Portanto, a regra prática é: disponibilize um arquivo favicon.ico com vários tamanhos na pasta raiz para todos os elementos que o solicitarem, seguindo o padrão, e disponibilize as imagens PNG de 16 e 32 pixels por meio de tags de link para os navegadores modernos, que as preferem.

A armadilha do iOS: a transparência fica preta.

O ícone "apple-touch-icon" tem uma borda bem definida que chama a atenção de quase todos. O iOS não sobrepõe ícones transparentes a um fundo agradável; em vez disso, preenche as áreas transparentes com preto sólido. Um logotipo exportado com um fundo transparente tem uma boa aparência em todos os outros lugares, mas se transforma em um quadrado preto com uma marca flutuante na tela inicial de um iPhone.

A solução é achatar o ícone sobre uma cor de fundo específica antes de exportá-lo: branco, a cor da sua marca, qualquer cor escolhida intencionalmente. O iOS então arredonda os cantos automaticamente, portanto, não arredonde os cantos previamente – um ícone com cantos já arredondados será recortado novamente e apresentará áreas escuras nos cantos.

Dê um pouco de espaço à marca também: como o iOS aplica sua própria máscara de borda, qualquer elemento gráfico que toque a borda da tela de 180x180 pixels será cortado. Manter o logotipo aproximadamente no centro, ocupando cerca de 80% da área, é uma prática segura e, além disso, o logotipo fica melhor visualmente como um ícone de aplicativo.

O que está ultrapassado (tire isso da sua cabeça)

O código antigo para o favicon raramente causa problemas, mas aumenta o tempo de carregamento de cada página e faz com que os responsáveis pela manutenção percam tempo procurando arquivos de imagem que ninguém usa. Tudo o que se segue pode ser removido:

Os arquivos browserconfig.xml e as metatags msapplication-TileColor/TileImage não são mais utilizados. Eles eram usados para personalizar os blocos da tela inicial do Windows 8 e do Internet Explorer 11. Atualmente, ambos não estão mais em uso.
apple-touch-icon-precomposed. Isso suprimiu o efeito de brilho que o iOS 6 adicionava aos ícones. O efeito de brilho desapareceu com o iOS 7, em 2013; o simples atributo rel="apple-touch-icon" é tudo o que você precisa.
A escala de tamanhos para o ícone "apple-touch-icon": 57, 72, 76, 114, 120, 144, 152. Esses tamanhos correspondiam às resoluções específicas de modelos antigos de iPhone e iPad. Um único ícone de 180x180 pixels é suficiente para cobrir todos os dispositivos atuais.
O atributo "rel" para "ícone de atalho" era uma peculiaridade do Internet Explorer e nunca foi um padrão. O simples atributo "rel" para "ícone" tem funcionado em todos os navegadores há mais de uma década.
Ícones de máscara para o Safari e arquivos SVG para abas fixadas. As versões mais recentes do Safari usam o favicon padrão para as abas fixadas, portanto, o arquivo de máscara monocromática não tem utilidade.
As tags de link PNG com 96, 128, 196 e 228 pixels são usadas para garantir a compatibilidade com versões antigas do Chrome e do Opera. No Android, os ícones do manifesto substituíram essas tags; no desktop, elas nunca foram necessárias.

Criando um logotipo que permanece legível mesmo com apenas 16 pixels

As questões de formatação são a parte mais fácil. O desafio maior é que o seu ícone precisa funcionar em 16x16 pixels, o que significa que um logotipo de 256 pixels se torna uma mancha borrada. Algumas regras podem ajudar.

Simplifique ao máximo. Use o símbolo do seu logotipo, e não o nome da marca em texto – o texto se torna ilegível quando o tamanho é inferior a cerca de 32 pixels, a menos que seja composto por uma ou duas letras. Se a sua marca for tipográfica, um monograma com uma única letra sobre um fundo de cor sólida terá um desempenho melhor do que um logotipo completo reduzido.

Prefira formas marcantes e alto contraste em vez de detalhes minuciosos. Traços finos desaparecem em tamanhos pequenos, e gradientes sutis se transformam em ruído. Verifique o ícone em barras de guias claras e escuras; um ícone azul-marinho escuro desaparece em um tema escuro, a menos que tenha um contorno mais claro, um pequeno elemento de fundo ou uma variante SVG que altere as cores por meio de uma regra de esquema de cores preferencial.

Por fim, observe o resultado com o zoom em 100%, sem aplicar qualquer tipo de ampliação no seu software de design. Uma renderização com o tamanho de uma aba é a única forma de obter uma pré-visualização precisa.

Criando todo o conjunto de elementos a partir de um único logotipo, diretamente no navegador.

Você não precisa do Photoshop ou de comandos complexos do ImageMagick para fazer isso. O gerador de favicon do FileTinker recebe uma imagem e produz o pacote completo descrito acima em uma única etapa: o arquivo favicon.ico com múltiplos tamanhos (16, 32 e 48 pixels), os arquivos favicon-16x16.png e favicon-32x32.png, um arquivo apple-touch-icon.png de 180x180 pixels com fundo para que não fique preto em dispositivos iOS, os arquivos android-chrome-192x192.png e android-chrome-512x512.png, um arquivo site.webmanifest que configura os ícones do Android e um trecho de código para copiar e colar com as tags de link correspondentes. Tudo é entregue em um único arquivo zip, e o processamento ocorre inteiramente no seu navegador – o logotipo nunca sai do seu computador.

Comece com a versão maior e mais nítida do seu logotipo; 512 pixels ou mais é o ideal, já que a maior resolução de saída é 512x512, e aumentar a escala de uma imagem pequena resulta em perda de qualidade. Se a imagem original não for quadrada, o gerador oferece as opções de ajuste "preencher" e "conter": "preencher" ocupa todo o espaço da imagem e corta o excesso, enquanto "conter" ajusta toda a imagem dentro do espaço disponível e preenche o restante com a cor de fundo escolhida. Para ter controle preciso sobre qual parte de um logotipo largo será preservada, primeiro ajuste-o para que fique quadrado usando a ferramenta de recorte e, em seguida, insira a imagem quadrada no gerador.

Escolha a cor de fundo com cuidado, mesmo que o seu logotipo não tenha transparência – é essa cor que os usuários do iOS verão atrás do seu logotipo e que preencherá o espaço nas bordas da tela. Em seguida, descompacte o arquivo na pasta raiz do seu site, cole o código na seção `<head>` e publique. Se você precisar apenas de um ícone .ico rápido para um projeto secundário, a conversão de PNG para ICO do conversor de imagens produzirá um ícone de tamanho único em segundos, mas, para qualquer coisa que seja exibida publicamente, o pacote completo vale a pena, mesmo que leve um minuto a mais.