Tamanhos de favicon e código HTML (2026): a lista enxuta | We.Inc
Os arquivos de favicon de que um site realmente precisa em 2026: favicon.ico, um SVG, um Apple touch icon de 180px e ícones de manifesto de 192 e 512, com tags de head para copiar e um gerador de manifesto.
Cinco arquivos cobrem quase todos os navegadores e dispositivos: um favicon.ico de 32 por 32, um ícone SVG para navegadores modernos, um PNG apple-touch-icon de 180 por 180 para a tela inicial do iPhone e PNGs de 192 por 192 e 512 por 512 listados em um manifesto de web app. A Pesquisa Google quer um ícone quadrado, de preferência maior que 48 pixels.
O conjunto de favicons que vale a pena publicar
Arquivo
Tamanho
Usado por
Qualquer um (vetor)
Abas de navegadores modernos, nítido em qualquer tamanho
Tela inicial do iPhone e do iPad
Manifesto de web app, tela inicial do Android
Manifesto de web app, instalação e telas de abertura
Guias antigos de favicon listam vinte tamanhos ou mais para aparelhos que ninguém usa. Hoje o navegador redimensiona a partir de poucos arquivos de origem bons, então o trabalho é escolher os cinco certos, escrever as tags do head corretamente e garantir que o Google consiga rastreá-los. Use o gerador abaixo para criar as tags e o manifesto do seu site.
Crie uma imagem mestre quadrada de 512 por 512, com a marca centralizada e um pouco de margem.
Exporte os cinco arquivos da tabela ou crie-os com o nosso gerador de favicon.
Preencha o gerador com o nome e a cor do seu site e depois copie as tags do head e o manifesto.
Envie os arquivos para a raiz do site, cole as tags no head de todas as páginas e faça uma atualização forçada para conferir.
Teste a versão de 16 pixels isoladamente; textos finos e linhas delicadas somem no tamanho de uma aba, então simplifique a marca.
Coloque uma media query de modo escuro no SVG para que um logo escuro continue visível em abas escuras.
Mantenha a parte importante de um ícone maskable dentro do círculo central, com raio de 40% da largura, porque o Android pode cortar o resto.
Não bloqueie os arquivos de ícone nem a sua página inicial no robots.txt; o Google precisa rastrear os dois para mostrar o seu favicon nos resultados.
Os navegadores guardam favicons em cache com força, então renomeie o arquivo ou adicione uma query de versão quando trocá-lo.
Perguntas frequentes
Qual é o melhor tamanho de favicon?
Não existe um único tamanho ideal. Publique um ICO de 32 por 32 para compatibilidade e um SVG para abas modernas nítidas, e depois adicione o ícone da Apple de 180 pixels e os ícones de manifesto de 192 e 512 para a tela inicial. A Pesquisa Google pede uma imagem quadrada, com pelo menos 8 pixels e de preferência maior que 48 por 48.
Como adiciono um favicon a um site?
Coloque os arquivos na raiz do site e adicione tags link no head de todas as páginas: rel icon para o ICO e o SVG, rel apple-touch-icon para o PNG de 180 pixels e rel manifest apontando para um arquivo JSON que lista os ícones de 192 e 512. O gerador desta página escreve essas linhas para você.
Por que meu favicon não aparece no Google?
O Google precisa rastrear tanto a sua página inicial quanto o arquivo do ícone, o ícone precisa ser quadrado e o link tem que estar no head da página inicial. As atualizações podem demorar a aparecer porque o Google rastreia os favicons de novo no próprio ritmo.
Ainda preciso do favicon.ico?
Vale a pena manter. Algumas ferramentas, leitores de feed e navegadores antigos pedem /favicon.ico diretamente sem ler o seu HTML, e um ICO pequeno na raiz atende a eles.
O que é um ícone maskable?
Um ícone de manifesto marcado com purpose maskable, desenhado com margem extra para que o Android possa recortá-lo em círculo, squircle ou outro formato. Mantenha o logo dentro da zona segura central e preencha o fundo de ponta a ponta.
Por que a lista ficou menor
Os navegadores agora escolhem o ícone mais próximo e o redimensionam, e o formato SVG permite que um único arquivo atenda a todos os tamanhos de aba. Os vários tamanhos antigos de bloco do Windows e da Apple eram para plataformas que já mudaram.
A documentação do Safari da Apple ainda descreve touch icons por aparelho, mas o iOS recorre a um ícone maior quando não há correspondência exata, então um único PNG de 180 pixels atende bem aos iPhones e iPads atuais.
Os ícones do manifesto
Os navegadores Chromium precisam de pelo menos um ícone de 192 pixels e um de 512 pixels no manifesto antes que um site possa ser instalado, segundo o web.dev. Com esses dois, o Chrome redimensiona para outras densidades automaticamente.
Cada ícone do manifesto pode ter um purpose any, maskable ou monochrome. Use um arquivo separado para o maskable, já que a margem que serve para um formato recortado fica pequena demais quando exibida em quadrado.
Como levar o favicon aos resultados de busca
A Pesquisa Google mostra um favicon ao lado dos resultados quando encontra um na sua página inicial. Os valores de rel suportados são icon, shortcut icon, apple-touch-icon e apple-touch-icon-precomposed.
O Google também aceita vários formatos, incluindo ICO, PNG, GIF e JPEG. O arquivo do ícone pode até ficar em outro domínio, desde que o Googlebot tenha permissão para buscá-lo.