De que maneiras posso colocar um favicon no meu site?

Question

Eu estava olhando na web da maneira como diferentes sites colocam seu favicon no site. Sempre que tento fazer isso sozinho, acabo "hackeando" até que de repente decida trabalhar.

Suponho que tenho duas perguntas em uma aqui.

1. Como este site está adicionando seu favicon? - http://www.fbd.ie

   Não consigo encontrar favicon.iCo em sua fonte de página.

2. Além de incluir <link rel="shortcut icon" href="/favicon.ico">, como posso incluir um favicon?

Answer 1

1. Provavelmente só tem um arquivo chamado favicon.ico no diretório raiz do site. A maioria dos navegadores vai apenas olhar lá por padrão, independentemente de se houver um <link> tag ou não.
2. Veja a resposta para #1.

Answer 2

A maneira mais fácil de adicionar um favicon é simplesmente colocar um arquivo chamado favicon.ico no diretório raiz do seu site.

Os navegadores o encontrarão automaticamente.

Você também pode colocar especificamente em um <link> marcação. Qualquer um deles funcionará:

<link rel="icon" type="image/vnd.microsoft.icon" href="http://example.com/image.ico">
<link rel="icon" type="image/png" href="http://example.com/image.png">
<link rel="icon" type="image/gif" href="http://example.com/image.gif">

EDIT: Vejo que você já sabia disso. : D

Answer 3

Tudo o que você precisa fazer é incluir o arquivo na raiz do seu site. Os navegadores foram projetados para solicitar isso automaticamente - Você verá um grande número de solicitações para ele 404ing em seus logs da web, se você não tiver um!.

Da Wikipedia:

O meio original de definir um favicon, introduzido no Internet Explorer 4, foi colocando um arquivo chamado Favicon.ico no diretório raiz de um servidor da Web. Isso seria usado automaticamente na exibição dos favoritos do Internet Explorer (marcadores). Posteriormente, no entanto, um sistema mais flexível foi criado usando HTML para indicar a localização de um ícone para qualquer página. Conforme detalhado abaixo, isso é alcançado adicionando um elemento de link à seção do documento que especifica o tipo do arquivo de imagem e sua localização. Dessa forma, qualquer arquivo de imagem definido pelo padrão pode ser usado.

O ponto importante é que você não precisa fazer nada na sua marcação HTML ou em qualquer outro arquivo de recursos. Basta despejar o arquivo na raiz.