favicon

[Cira]

Hi all,

How do i go about setting up a favicon. I presume that is the icon in the tab of the browsers.

i have used the code...

<link rel="icon" href="favicon.ico" type="image/x-icon">

is this correct i found it online somewhere.

I have tried this but it hasn't changed and when running the site through the w3c validator it says its an error which i have copied below.


Line 25, Column 56: link element outside head.

<link rel="icon" href="favicon.ico" type="image/x-icon">

&#9993;
Error Line 25, Column 56: Cannot recover after last error. Any further errors will be ignored.

<link rel="icon" href="favicon.ico" type="image/x-icon">

Regards

Dave

[Cira]

Ahh just realized i didn't have it in the right place. Ooops i didn't read the validation report correctly.

But saying that it is still not visible.

hmmm

[lucy24]

Unless you've got a wonky server, you don't have to do anything to make the favicon show up. Just put it in the top-level directory-- the same place you keep your main index, the robots.txt and .htacess and so on.

[Cira]

Yay i have a wonky server then.... ohh well lol

[Cira]

thanks for the reply

[robzilla]

However, if you're going to call the favicon from your HTML code anyway, instead of simply placing favicon.ico in your document root, you might as well convert it to PNG to save a few bytes, and load it like this:

<link rel="icon" type="image/png" href="http://www.example.com/youricon.png">

Just today doing this cut about 0.7kb off of my favicon.

You could also use the ICO format with PNG compression for the same effect, but I haven't quite figured out how widely this is supported.

[lucy24]

Hey, guess what. The w3c folks [w3.org] absolutely hate it when you put favicon.ico in your root directory. At least they did in 2005:

A second method for specifying a favicon relies on using a predefined URI to identify the image: "/favicon", which is relative to the server root. This method works because some browsers have been programmed to look for favicons using that URI. This approach is inconsistent with some principles of Web architecture and is being discussed by {yak, yak}. To summarize the issue: {yak, yak, yak}

There are a few other well-known encroachments on URI space, including the "robots.txt" file and the location of a P3P privacy policy. The Technical Architecture Group is exploring alternatives that do not impinge on URI space without license.

If that means that the w3c folks thought they could persuade the entire world to Do Something Different with robots.txt file, we have to conclude that they have given up. But they really do use the link method themselves. (I grabbed a current page at random.)

<link rel="icon" href="demo_icon.gif" type="image/gif">

Note that I was wrong: It's got nothing to do with the server, it's the user's browser that looks for the file.

My server, apparently acting wholly on its own initiative, has created an empty file called favicon.gif to go with the real one, favicon.ico. If I delete it, it creates a new one.

Just today doing this cut about 0.7kb off of my favicon.

The savings won't last long once you add in the 79 bytes (I assumed you're on Windows so the line break is two characters) multiplied by every single page :-) Unless someone can figure out how to put it in the CSS. Or if your whole site is constructed out of include files and you've already got one for the generic page body.

Quick edit:
My own numbers are: .ico 318b; .png 201b; .gif 163b.

[alt131]

You ask the good questions cira :)

But saying that it is still not visible.

Assuming the browser address field that depends on browser/version. If coding html5, the draft [w3.org] has a good explanation. Note best to include www when specifying an absolute url.

rel="icon" is new to html5, so for html4.01, or non-html5 capable browsers I believe rel="icon" was well adopted, especially when coupled with type="image/x-icon". But for ie<9 you'll need:
<link rel="shortcut icon" type="image/x-icon" ... >
Also, the icon must be a proper .ico file and best to use conventional dimensions like 16x16, 32x32 or 48x48. (Note test/check the pngfix script you're using to see if it applies to favicons, although I suspect not.)

If you choose to use two <link>'s to send a transparent, animated favicon to capable browsers and a static fallback for earlier versions, just note ie applies the first link, other browsers the second - can be a "gotcha" when checking which browser is using which icon.

If that means that the w3c folks thought they could persuade the entire world to Do Something Different with robots.txt file, we have to conclude that they have given up.

Not quite - the section quoted was referring to browsers being engineered to automatically look for a favicon in the server root, which creates issues on a shared server and the favicon is in a user root. robots.txt was mentioned in relation to other issues.

[robzilla]

With the advent op tabbed browsing, I suspect that the favicon will remain important enough for the major browsers to continue looking for them automatically, so I tend to just leave out the

LINK

tag entirely and leave it up to the browser to find favicon.ico in my document root.

Chrome's behavior is a little odd in this respect. When you have no favicon defined in your HTML and no favicon.ico file sits in your document root, it will nonetheless request the file with every pageview, even if it has already returned with a 404 not-found error. Firefox remembers in such a case that there is no favicon present, and therefore only looks for it at the first request to the domain. It's easy to forget about the favicon, but not having one in place can potentially cause performance overheads.

[Cira]

Right i managed to get it to work but not how i wanted it to happen.

I tried every possibly way of doing it and in the end i had i live chat with my hosting company to ask them if it was supported by them who tried to get me to upgrade my package in order for them to assign it for me. To which i politely told them where the could go and threatened to not recommend them to my clients like i have been as i do send at least one person a week to them. They did it for me in the end then didn't tell me how they did it on their servers and signed out before i could even check it and confirm it.

[edited by: tedster at 6:45 pm (utc) on Apr 30, 2011]

[lucy24]

You mean that it turned out you do have a wonky server after all? That's rotten. But some of us now know more than we did before you posted, so I'm glad you did ask.

[Cira]

Yup wonky server

[BillyS]

Just today doing this cut about 0.7kb off of my favicon.

A favicon should be around 318 bytes, yet in my browser's cache I see an amazon one that is 18k. I've seen some that were over 34K, which is larger than any page on our site...

It takes about 15 minutes (start to finish) to figure out how to compress a favicon and upload it. Check out the one on WebmasterWorld as an example. It's 318 bytes because someone took the time to deploy it correctly.

Save the web some bandwidth, maintain your site's speed, do it the right way.

[Samizdata]

do it the right way

A quote from the estimable jdMorgan from an earlier thread on this subject:

Better yet, look for one of the many "free favicon" tools, and make yourself a multi-resolution .ico-format file, so that your attractive website-brand icon can be dragged and dropped to the desktop or into a folder as a shortcut. True .ico files contain three embedded images, one each at 16x16, 32x32, and 48x48 pixels in size.

If your site supports mobile devices, be aware that Apple's iPhone will ask for "apple-touch-icon.png" or "apple-touch-icon-precomposed.png" in the same way that non-mobile browsers ask for favicon.ico, so you may also want to make a 57x57-pixel image for it as well.

I'm lazy; I make my original image at 57x57 with a 4-pixel border all around, save it as a .png for the Apple devices, then crop it to 48x48 (thus removing the border and one row of pixels from the bottom and left side), and then scale that 48x48 image down both to 32x32 and to 16x16.

Source: [webmasterworld.com...]

...

[robzilla]

so that your attractive website-brand icon can be dragged and dropped to the desktop or into a folder as a shortcut

Do people actually do this? Personally, I don't think a multi-resolution icon is worth the performance/bandwidth hit.

[Samizdata]

Do people actually do this?

Only those who know about it.

I have sometimes seen examples on other people's computers.

Of course, if webmasters don't support it then few visitors will bother.

...

[rocknbil]

A multi resolution icon is so that the **browser** can decide what to do with it - bookmark a site and see. 16 X 16 in the address bar, 32 X 32 in bookmarks/favorites etc. (<not picking on you rob> ) I find a discussion about favicon size (7-12K maybe?) ironic in an age where people are developing sites that are 300K or more . . . hardly seems to be an issue. Second, a favicon is one of the first files to get cached on entry and least likely to need reloading.

Cira before calling it quits with your ISP, try bookmarking the page, closing the browser, re-opening . . . . favicons are sometimes funky that way with browsers.

[Cira]

Hi Rocknbil,

I tried everything i could think of including that before going to the ISP but to no avail but it has been set up now even though i do not know how they did it because they didn't change any of my coding.

[robzilla]

It's certainly not that big an issue (the favicon is, after all, loaded last by most browsers), and I realize that I tend to go a little overboard when it comes to optimization, but I'm certainly not among those people who are "developing sites that are 300K or more". The transfer size of pages on the last site I developed averages around 14KB, and that's all-inclusive (html, css, images). A 12KB favicon would nearly double that.

The only thing I can think of right now is that your host may have disabled support for .ico-type files in the server configuration -- which seems quite silly, but so does trying to get you to upgrade your package just to get the favicon working. I'm nevertheless glad they finally fixed it for you.

[lucy24]

I tried everything i could think of including that before going to the ISP but to no avail but it has been set up now even though i do not know how they did it because they didn't change any of my coding.

Do you mean your own visible code that you wrote? They wouldn't change that; if tweaking some html is all it took, you could have done it yourself. Your host flicked some secret switches in the background that only they can see.

Or did you mean your actual ISP? That is, you've got an Internet account and they threw in some www space to go with it? If so, that explains a lot, because space that comes as an extra with your regular Internet service tends to have all kinds of restrictions. As long as you're just posting pictures-to-share or using the space to run the w3c link checker you won't notice. But start trying to construct a proper site and you'll go running for the nearest cheap host.

[Cira]

Hi Lucy,

It was my hosting company not the ISP i was just using it as a reference from Robozilla's comment.

They must have flicked a switch somewhere.

I used my current hosting company only because they served me well in the past but they have made significant changes to their plans which i was not made aware of..... ohh well

[phranque]

fyi these are the geekiest WebmasterWorld threads i've seen on the subject.

Favicon Primer:
http://www.webmasterworld.com/forum36/2385.htm [webmasterworld.com]

Stop all those favicon 404s!:
http://www.webmasterworld.com/graphics_multimedia/3511557.htm [webmasterworld.com]