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

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

— 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