Favicon won't load, even when going to the direct URL

Question

The favicon isn't working on my site. If I go to google.com/favicon.ico I see the image displayed. But for some reason on my site, lucasjohnson.co.uk/favicon.ico prompts me to download a file. I have even tried replacing my own favicon with Google's, but I still have the same problem.

Edit: The file ico file was converted from a png using Dynamic Drive's FavIcon Generator.

Answer 1

I checked http://www.lucasjohnson.co.uk/favicon.ico, and the response content-type is text/plain. There are several content types that can be used for favicon, but text/plain is not one of them.

The most common ones are image/x-icon and image/vnd.microsoft.icon.

So basically, just choose one of the following content types and add it to your link tag:

<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.lucasjohnson.co.uk/favicon.ico" />
<link rel="icon" type="image/png"                href="http://www.lucasjohnson.co.uk/favicon.ico" />
<link rel="icon" type="image/gif"                href="http://www.lucasjohnson.co.uk/favicon.ico" />
<link rel="icon" type="image/x-icon"             href="http://www.lucasjohnson.co.uk/favicon.ico" />

See http://en.wikipedia.org/wiki/Favicon for more details.

BTW, regardless (or not) of this problem, I've noticed that you're not closing one of your meta tags:

<meta name="viewport" content="width=device-width">