Duas tags link são o núcleo de um favicon, uma para o favicon.ico e outra para um apple-touch-icon. Some uma para o manifest do web app se quiser o site instalável, e uma para um ícone SVG se quiser um vetorial. Todo o resto das listas longas é ou um padrão que o navegador já aplica ou uma plataforma que não existe mais. Que tamanhos em pixels vão dentro desses arquivos é outra pergunta, respondida em o guia de tamanhos de favicon; esta página trata da marcação em volta deles.
Quais tags link vão no head?
Este é o conjunto que o gerador de favicon escreve para você, com a linha do SVG presente só quando você parte de uma letra:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">Quatro linhas, cada uma com o seu trabalho. A primeira aponta para o .ico. A segunda oferece um ícone vetorial aos navegadores que conseguem usá-lo. A terceira é o que o iOS lê para a tela inicial, porque, como observa a MDN, o iOS ignora para esse fim a relação padrão icon e o atributo sizes. A quarta é onde o Android encontra os PNGs de 192 e 512 px. Se você só publicar um .ico e um apple-touch-icon, o site continua com um ícone funcionando em todos os lugares que importam para uma aba do navegador.
Os caminhos começam com barra. Um caminho relativo como icons/favicon.ico é resolvido em relação à página atual, então funciona na página inicial e quebra em /blog/algum-post/, que é como um site acaba com o ícone certo em uma seção e um genérico no resto.
A ordem das tags importa?
Só quando dois ícones são candidatos igualmente bons. A descrição da MDN para rel="icon" diz que, quando há vários, o navegador usa media, type e sizes para escolher o mais apropriado, que se vários forem igualmente apropriados vale o último, e que se a melhor opção se mostrar inutilizável, por exemplo por um formato não suportado, o navegador passa para a próxima melhor. Essa é a razão para listar o .ico primeiro e o SVG depois: um navegador que entende os dois termina no SVG, e um que não entende volta para o .ico.
Isso é o que diz a especificação, não um teste em cada navegador. Os navegadores já divergiram sobre como pesar um .ico contra um SVG, e o sizes="32x32" na linha do .ico é a precaução comum: ele diz ao navegador para que serve melhor aquele arquivo em vez de deixá-lo adivinhar. Depois de qualquer mudança, olhe a aba nos navegadores que importam para você em vez de confiar no raciocínio.
Quais tags antigas dá para deixar de fora?
rel="shortcut icon". A MDN chama a palavra-chaveshortcutde não conforme e diz que os autores não devem mais usá-la. O Google ainda a aceita, masiconsozinho faz o mesmo trabalho.apple-touch-icon-precomposed. A documentação do Google ainda a lista para versões anteriores do iOS. Umapple-touch-iconatual de 180 px é o que vale manter.- Um atributo
sizesem cada linha deapple-touch-icon. Um único arquivo resolve, então a versão de seis linhas são seis lugares para esquecer de atualizar. - As tags de blocos do Windows e o
mask-icondas abas fixadas do Safari, que o guia de tamanhos trata como formatos que envelheceram. - O manifest, se você não se importa com a instalação do site. É a única linha que dá para tirar sem perder o ícone da aba, porque a aba nunca o lê.
Mantenha o arquivo favicon.ico na raiz do site mesmo que a tag aponte para outro lugar. Os navegadores pedem /favicon.ico sem ninguém mandar, então ele cobre as páginas em que o head está faltando ou foi removido.
Como conferir se uma página publicada serve o ícone certo?
Quatro verificações, na ordem de quantas vezes elas acham o problema:
- Abra cada arquivo pela URL. Cole
/favicon.ico,/icon.svge os outros na barra de endereço. Você deve ver uma imagem. Se vir sua página 404, o arquivo não está na raiz; se vir sua página inicial, uma regra genérica está respondendo com 200 por um arquivo que falta, e o navegador vai tratar aquele HTML como um ícone quebrado. - Leia o head da página que de fato é servida. Veja o código-fonte de uma página aninhada, não só da página inicial, e procure por
rel="icon". Templates que montam o head de forma diferente conforme o tipo de página são uma causa comum de um ícone que aparece só em algumas páginas. - Recarregue tirando o cache do caminho. Os favicons ficam em um cache separado do da página, então um reload forçado muitas vezes não muda nada. Uma janela anônima, ou o arquivo do ícone aberto direto e recarregado, mostra o que o servidor envia agora.
- Confira se nada bloqueia os arquivos. O Google diz que o Googlebot-Image precisa conseguir rastrear o arquivo do ícone e o Googlebot a página inicial. Uma regra de
robots.txtque cubra uma pasta de assets pode esconder o ícone da busca enquanto a aba do navegador parece normal.
As ferramentas de desenvolvedor do navegador ajudam com as duas primeiras. No painel de rede, recarregue e filtre por imagens, e procure a requisição do ícone e o código de status. Os navegadores baseados em Chromium também mostram o manifest e seus ícones no painel de aplicação, incluindo os erros.
O que o Google precisa para o ícone ao lado do seu resultado?
Em outubro de 2026, a documentação de favicon do Google pede uma tag link no head da página inicial, uma imagem quadrada em uma URL estável e acesso de rastreamento tanto ao arquivo quanto à página. Só há suporte a um favicon por nome de host: um subdomínio pode ter o seu, mas um subdiretório como /news/ não. Os formatos que a página lista são BMP, GIF, ICO, PNG, JPEG, PPM e TIFF, e o SVG não está entre eles, então mantenha um ícone raster mesmo que a aba do seu navegador mostre um SVG. O tamanho recomendado é maior que 48 px, e uma mudança pode levar de vários dias a várias semanas para aparecer. O Google também diz que cumprir todas as diretrizes não garante que o ícone seja exibido. Solicitar a indexação da página inicial no Search Console é a única alavanca que ele documenta, e ela não torna o processo instantâneo.
O que o gerador não faz por você
O gerador desenha os arquivos e escreve as tags. Ele não publica nada, então os arquivos ainda precisam ser enviados para a raiz do site. O manifest que ele escreve tem um nome de preenchimento, Your site name, que você precisa trocar, e suas entradas de ícones não levam o campo purpose, então o Android não vai tratá-las como arte maskable. O trecho de tags supõe que os arquivos estão na raiz; um site servido de uma subpasta precisa trocar os caminhos. E nada na ferramenta confere um site publicado: as quatro verificações acima continuam sendo suas.
Se você ainda não tem os arquivos, o gerador de favicon os produz a partir de uma imagem ou de uma letra, junto com estas tags, e roda no seu navegador, então o logo não é enviado para lugar nenhum. Cole as tags, envie os arquivos e percorra as quatro verificações.
Um ícone que passa em todas as verificações ainda pode ficar feio a 16 px, e nenhuma tag resolve isso. Por que um logo deve ser um SVG explica o que uma origem vetorial te dá antes de ser encolhida até caber em uma aba.
Perguntas frequentes
Quais tags link eu preciso para um favicon?
Uma tag rel="icon" apontando para /favicon.ico, uma rel="apple-touch-icon" apontando para um PNG de 180 px e uma rel="manifest" se você quiser o site instalável no Android. Uma linha de ícone SVG é opcional e vai ao lado do .ico, não no lugar dele.
Ainda preciso de rel="shortcut icon"?
Não. A MDN descreve a palavra-chave shortcut como não conforme e diz que os autores não devem mais usá-la. O Google ainda a aceita por razões históricas, mas rel="icon" sozinho faz o mesmo trabalho nos navegadores atuais.
Por que meu favicon aparece na página inicial mas não nas outras?
Normalmente porque a tag link usa um caminho relativo, que é resolvido em relação à página atual e quebra em URLs aninhadas, ou porque outro template monta o head nessas páginas. Use caminhos que comecem com barra e veja o código-fonte de uma página aninhada para confirmar que a tag está lá.
Posso usar um SVG como único favicon?
Os navegadores divergem, e a documentação de favicon do Google não lista o SVG entre os formatos que aceita para os resultados de busca em outubro de 2026. Publique um SVG se quiser um, mas mantenha um favicon.ico ou um PNG ao lado dele para que todos os navegadores e o Google tenham algo que possam usar.
Como confiro se meu favicon está configurado corretamente?
Abra cada arquivo de ícone pela URL e confirme que é uma imagem e não um 404 nem a sua página inicial. Depois veja o código-fonte de uma página aninhada para confirmar que as tags estão no head, teste em uma janela anônima para contornar o cache de favicons e confirme que o robots.txt não bloqueia os arquivos.
Última atualização 26 de outubro de 2026
