Necessário adicionar tag de link para favicon.ico?

153

Existem navegadores modernos que não detectam o favicon.ico automaticamente? Existe algum motivo para adicionar a tag de link para favicon.ico?

<link rel="shortcut icon" href="/favicon.ico">

Meu palpite é que só é necessário incluí-lo no documento HTML se você optar por usar GIF ou PNG ...

html favicon html-head user1087110
fonte
Eu nunca vi que qualquer navegador precisasse. Você tem algum exemplo?
shark555
Posso nomear alguns navegadores que possuem configurações de preferência para procurar favicon.icoautomaticamente ou não . Portanto, se você deseja ter certeza de que seu ícone aparece, é melhor incluir um link no seu HTML. A propósito, os arquivos .png geralmente são menores que os arquivos .ico comparáveis.
Sr. Lister
Por favor, citar alguns Sr. Lister :) Não shark555, eu não posso nomear qualquer ...
user1087110
5
O Firefox (e outros navegadores baseados no Gecko, como o SeaMonkey), possui várias configurações para ajustar seu comportamento. browser.chrome.faviconsdefinido como true procurará favicon.ico na raiz; se falso, ele carregará apenas ícones se especificado na página HTML. Consulte kb.mozillazine.org/Browser.chrome.favicons e páginas relacionadas.
Sr. Lister
Possível duplicata de Você precisa incluir <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?
Dan Dascalescu

Respostas:

253

Para escolher um local ou tipo de arquivo diferente (por exemplo, PNG ou SVG ) para o favicon:
Um motivo pode ser o fato de você querer colocar o ícone em um local específico, talvez na pasta de imagens ou algo semelhante. Por exemplo:

<link rel="icon" href="_/img/favicon.png">

Esse local diferente pode até ser um CDN, assim como o SO parece fazer <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Para saber mais sobre o uso de outros tipos de arquivo como PNG, consulte esta pergunta .

Para propósitos de bloqueio de cache :
adicione uma sequência de consultas ao caminho para propósitos de bloqueio de cache:

<link rel="icon" href="/favicon.ico?v=1.1">

Os Favicons são muito armazenados em cache e essa é uma ótima maneira de garantir uma atualização.

Nota de rodapé sobre o local padrão:
No que diz respeito à primeira parte da pergunta: todos os navegadores modernos detectariam um favicon no local padrão, portanto, esse não é um motivo para usá- linklo.

Nota de rodapé sobre rel="icon":
Conforme indicado pela resposta de @ Semanino , usar rel="shortcut icon"é uma técnica antiga, exigida por versões mais antigas do Internet Explorer, mas na maioria dos casos pode ser substituída pelas rel="icon"instruções mais corretas . O artigo @Semanino baseou isso em links apropriados para a especificação apropriada, que mostra um relvalor de shortcutnão é uma opção válida.

Jeroen
fonte
Isso deve aparecer na <head>tag?
Max Williams
1
@MaxWilliams Sim. (Consulte "Elementos-pai permitidos" nos documentos MDN ou "Contextos" na especificação W3 ).
Jeroen #
1
É 2016 - e Chrome ainda (? Ou ainda) não está reconhecendo o favicon.ico padrão na raiz se você também especificar outros ícones ...
Sebastian G. Marinescu
52

Observe que as especificações HTML5 do W3C e do WhatWG padronizam

<link rel="icon" href="/favicon.ico">

Observe o valor do atributo "rel"!

O valor shortcut iconpara o relatributo é uma extensão específica do Internet Explorer muito antiga e obsoleta .

Portanto, considere não usá-lo mais e atualizar seus arquivos para que sejam compatíveis com os padrões e sejam exibidos corretamente em todos os navegadores.

Você também pode dar uma olhada nesta ótima postagem: rel = "ícone de atalho" considerado prejudicial

Semanino
fonte
1
Não é "obsoleto" (nunca foi realmente parte de nenhuma especificação). No entanto, a especificação do HTML5 declara: "Por motivos históricos, a palavra-chave icon pode ser precedida pela palavra-chave" atalho ". Se a palavra-chave" atalho "estiver presente, ela deverá ser apresentada imediatamente antes da palavra-chave ícone e as duas palavras-chave serem separadas. por apenas um caractere ESPAÇO U + 0020 ". Observe também que "Não há um tipo padrão para recursos fornecidos pela palavra-chave icon".
DocRoot 28/05
12 
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

Tudo depende do formato da imagem que você deseja usar!
se você tiver um ícone do seu site, será muito melhor para o UX!

demonstração

mostre o logotipo na guia do navegador

insira a descrição da imagem aqui

xgqfrms
fonte
iconhandbook.co.uk/reference/examples/favicons links: mathiasbynens.be/notes/rel-shortcut-icon#comments links: html.spec.whatwg.org/multipage/semantics.html#rel-icon links:
xgqfrms
O UX não tem nada a ver com isso.
paddotk 14/01
@paddotk, o que quero dizer é que o usuário pode dizer com facilidade qual guia pertence ao site de destino ao abrir várias guias no navegador se houver um ícone favicon exibido na guia.
xgqfrms 12/06
1

Podemos adicionar para todos os dispositivos com tamanho específico de plataforma

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">
Abhilash
fonte
0

A conclusão é que nem todos os navegadores procurarão realmente o seu arquivo favicon.ico . Alguns navegadores permitem que os usuários escolham se devem ou não procurar automaticamente. Portanto, para garantir que ele sempre apareça e seja visualizado, você precisa defini-lo.

animuson
fonte
6
Obrigado pelo seu comentário animuson. Você pode nomear alguns navegadores que não terão aparência automática?
usar o seguinte comando
11
@ user1087110: Não conheço nada de fora da cabeça e honestamente quem se importa. O ponto é que você não pode assumir que sim e precisa prestar contas daqueles que não o farão.
animuson
Como não é mais relevante, você pode excluir sua resposta para limpar a página.
galinhas