I was looking around the web at the way different sites put their favicon into the site. Whenever I try to do it myself I end up "hacking" until it just suddenly decides to work.

I suppose I have 2 questions in one here.

1. How is this site adding it's favicon? -

   I can't find favicon.ico in it's page source.

2. Apart from including <link rel="shortcut icon" href="/favicon.ico">, how can I include a favicon?

I was looking around the web at the way different sites put their favicon into the site. Whenever I try to do it myself I end up "hacking" until it just suddenly decides to work.

I suppose I have 2 questions in one here.

1. How is this site adding it's favicon? - http://www.fbd.ie

   I can't find favicon.ico in it's page source.

2. Apart from including <link rel="shortcut icon" href="/favicon.ico">, how can I include a favicon?

• javascript
• html
• favicon

3 Answers 3

The easiest way to add a favicon is to simply put a file named favicon.ico into the root directory of your web site.

Browsers will find it automatically.

You can also specifically put in a <link> tag. Any of these will work:

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

Edit: I see you knew that already. :D

1. It probably just has a file called favicon.ico in the root directory of the website. Most browsers will just look there by default regardless of if there is a <link> tag or not.
2. See answer to #1.

All you have to do is include the file in the root of your site. Browsers are designed to request this automatically - you will see a large number of requests for it 404ing in your web logs if you don't have one!.

From wikipedia:

The original means of defining a favicon, introduced in Internet Explorer 4, was by placing a file called favicon.ico in the root directory of a web server. This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created using HTML to indicate the location of an icon for any given page. As detailed below, this is achieved by adding a link element to the section of the document which specifies the type of the image file and its location. In this way any image file defined by the standard may be used.

The salient point is that you don't have to do anything in your HTML mark-up or any other resource file. Just dump the file in the root.