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

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:

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" />
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