Você precisa incluir <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

205

Não incluí a seguinte linha de código na minha tag head, mas meu favicon ainda aparece no meu navegador:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Qual é o propósito de incluí-lo?

html favicon user784637
fonte

Respostas:

174

Se você não chamar o favicon, favicon.icopoderá usar essa tag para especificar o caminho real (caso você o encontre em um images/diretório). O navegador / página da Web procura favicon.icono diretório raiz por padrão.

Brian Graham
fonte
3
ou se você não possui o favicon.ico na pasta raiz, mas em uma pasta de ativos, por exemplo
Upvote
122

Na verdade, você deve fazer as duas coisas, para que todos os navegadores encontrem o ícone.

Nomear o arquivo "favicon.ico" e colocá-lo na raiz do seu site é o método "desencorajado" pelo W3C:

Método 2 (Desanimado): Colocando o favicon em um URI predefinido
Um segundo método para especificar um favicon depende do uso de um URI predefinido para identificar a imagem: "/ favicon", que é relativa à raiz do servidor. Este método funciona porque alguns navegadores foram programados para procurar favicons usando esse URI.
W3C - Como adicionar um favicon ao seu site

Portanto, para cobrir todas as situações, eu sempre faço isso, além do método recomendado de adicionar um atributo "rel" e apontá-lo para o mesmo arquivo .ico.

siburb
fonte
8
Sim, esta é uma resposta mais correta. Não há padrões relacionados a simplesmente colocar um favicon.icona raiz, mas a maioria dos navegadores solicitará o arquivo automaticamente por razões históricas.
Fabrício Matté 18/03/2013
10
O motivo apropriado para fazer isso não é porque funciona em algumas situações , mas porque o método melhor não funciona em algumas situações
Jasper
2
Curiosamente, o realFaviconGenerator recomenda não declarar o favicon no cabeçalho HTML.
Dan Dascalescu
7
O Internet Explorer inventou o favicon e o procurou na raiz. AFAIK, todos os navegadores fazem isso. É por isso que recomendo colocar um favicon.ico na raiz, porque, caso contrário, ele retornará 404 e a maioria dos sistemas não o armazena em cache ... por isso continua solicitando. Coloque um ícone lá e ele será armazenado em cache corretamente.
Stijn de Witt
50

Eu o uso por dois motivos:

  1. Eu posso forçar uma atualização do ícone adicionando um parâmetro de consulta, por exemplo ?v=2. como isso: <link rel="icon" href="https://stackoverflow.com/favicon.ico?v=2" type="image/x-icon" />

  2. Caso precise especificar o caminho.

nilsi
fonte
Impressionante, finalmente descobri por que não estava aparecendo!
Whamsicore 21/08
Tenho certeza de que foi apenas um erro de digitação, mas você tem um href relativo, o que significa que não funcionará, a menos que todas as suas páginas estejam no nível superior ou você tenha um arquivo favicon.ico em todos os subdiretórios.
Chris Cogdon
Para os leitores posteriores, o comentário de Chris Cogdon foi corrigido na edição "9 de setembro de 16 às 05:05", então não é mais um problema
Daryn
13

Simplesmente adicioná-lo à pasta raiz funciona de certa maneira, mas descobri que, se eu precisar alterar o favicon, pode levar dias para atualizar ... mesmo uma atualização de cache não funciona.

Nicole
fonte
Não se esqueça de Ctrl-C e reconstruir.
Jason Glass
9

Muitas pessoas definem seu caminho de cookie para /. Isso fará com que cada solicitação do favicon envie uma cópia dos cookies do site, pelo menos no chrome. Endereçar seu favicon ao seu domínio sem cookies deve corrigir isso.

<link rel="icon" href="https://cookieless.MySite.com/favicon.ico" type="image/x-icon" />

Dependendo da quantidade de tráfego que você recebe, esse pode ser o motivo mais prático para adicionar o link.

Informações sobre como configurar um domínio sem cookies:

http://www.ravelrumba.com/blog/static-cookieless-domain/

user3907900
fonte