A major concern for Web designers is making sure that a particular work stands out from the crowd. A design element that has been ignored quite a bit lately is the favicon. Personally, I have come to use both the Bookmarks Toolbar and a Bookmarks Sidebar (using All-in-one Sidebar) quite a bit after a long time of not really keeping my bookmarks very organized or caring to do so. Now that I have established quite a collection, I’ve had to organize them into their respective categories and more often than not I’m searching for a particular bookmark in order to look something up or check for updates on a specific site.
Please Use a Favicon
When faced with a decent amount of data, I find it easier to recognize an image pattern significantly quicker than coming upon a word or phrase that I’m looking for. The major problem is, however, that a large amount of my bookmarks don’t have a unique favicon and simply blend in with the crowd using the default Firefox page icon. I then have to start searching the text for a link and it becomes a bit tedious.
Why it Bothers Me
One of the major reasons I’m bothered when a site doesn’t use a favicon is that I have come into the habit of having only icons displaying on the Firefox Bookmarks Toolbar. Having only the favicon display, and removing any text label allows you to add significantly more links to the toolbar and have them remain visible. If a site doesn’t have a favicon, real estate is needed to have a label for the generic icon in the toolbar. I suppose its just a pet peeve of mine, but I assume if it bothers me, it must bother other people. Does it? Or am I the only one that uses the Firefox Bookmarks Toolbar in this way?
How to Create a Favicon
Creating a favicon is a very simple thing to do, which gives all the more reason to implement one. It is as easy as downloading png2ico and running it on a 16×16 pixel PNG. Documentation is included and it is quite easy to use. There is also a GUI implementation (German) if you prefer, but using the command line utility is quite easy. You can also create your favicon online using a variety of resources such as the Favicon Generator. Feel free to ask for any help, I’d be more than happy to get you up and running.
When creating your favicon, I’ve found it best to actually get into pixel art mode and work while at ~1000% zoom. Shrinking your logo or a unique element of your design into a 16×16 square doesn’t always fare too well. Sometimes you have to edit a pixel here and there so that the image is still effective. Just be sure that the favicon can directly be associated with your site so your returning visitors will be comforted by seeing your icon in their bookmarks instead of something generic.
You can implement your newly saved favicon using the following code:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />Supporting all Browsers
Naturally, Web browsers handle the presence of a favicon in different ways. For instance, more often than not your favicon isn’t even viewable in IE, which is disappointing in itself being that it still holds the majority of the browser market. The important thing to remember is that usually the favicon is saved when a user actually bookmarks your page. It usually doesn’t appear in the address bar, and we can all infer why. Another thing to keep in mind is the importance of actually converting to an icon file as opposed to including the favicon as a PNG. While Firefox and many of the other superior browsers do support PNGs and their transparent traits, IE does not, so always be sure to include the .ico file. If you would like to try and make the best of both worlds, you can use the following code to use the .ico file for IE, and take advantage of using a PNG elsewhere.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="icon" type="image/png" href="favicon.png" />As a parting note, please keep in mind that you should leave your favicon with the filename of ‘favicon’. You may be tempted to give it a meaningful name, but there are circumstances in which the favicon will not display if a different filename is used.
Favicons and IE7
After being directed to a particular post on favicons and IE7, it seems as though there is a strong possiblity that IE7 won’t even support favicons. Being that the favicon was established by Microsoft in the first place, I would truly miss this feature if it is removed in the next version of IE. I’ll be sure to do some testing in IE7 as the next versions are released to determine if this feature will truly be left out.
Comments
Definately something to help your website stand out. It should be something that everyone uses. Also to note that when your site is crawled by bots or by users, favicon.ico is one of the files that shows up as missing in a Web Server’s error logs.
Since using Firefox with tabbed browsing, favicons have become an insanely useful element. If it’s true about IE7, it’s unfortunate. Hopefully most designers keep on making use of it, even though it wont be supported by the browser with the majority of users.
@astridas: That is a great tip about missing favicons appearing in error logs. Thanks for the contribution.
@monico: You bring up a great point in that Firefox tabs showing favicons — yet another reason they’re insanely useful. I really hope that Microsoft does implement favicon usage, even if it is as bad as IE6.
I strongly agree that favicon’s help make a page stand out more and hope that Microsoft changes their mind over the use (or nonuse in this case) of favicons in IE7.
I’m using IE 7 beta preview and it seems to be supporting favicons just fine. Not supporting them would be really dumb.
@Christian: Well that is a big sigh of relief. I agree — removing favicon support would not be a smart move on the part of Microsoft
I do the icon-only toolbar thing too. If only Firefox wouldn’t add extra padding on the right side of the buttons. (See http://shinyplasticbag.com/buffer/extraspace.png for an example — it’s only really visible when you mouseover them and they pop up.)
@Mark: I know what you’re saying… I assume the padding is there because it isn’t meant to be used with no text. Perhaps there are only a a few of us using the bookmarks toolbar in such a way?
@Mark: this link shows you how to edit the extra padding….
http://www.mozilla.org/support/firefox/tips#app_lesspadding
Thanks so much for this tutorial.
@Kendra: I didn’t know that you were able to edit this — I should have dug around for a few minutes. Thanks for posting the link.
I had just went through the stats on my website today and pulled up the error summary to see the favicon at about 400% higher than all other error pages. I didnt think to look around for the file but thanks to you (yet again) My mind has been put to rest. This is something I will deffinately remember to add in.
As far as the code for the favicon, do I add it in the index page or do I need it in every page?
@Paul: The code should appear in your <head>s on all pages.
Thanks for the helpful article. I had the .ico as the filename ‘faveicon’ just in case as I uploaded my file. I wasn’t sure, but it seems like it works.
But, thanks for the extra about the .png. Although, I’m wondering why I should use .png if the .ico works in Firefox, etc.
Thanks.
I really don’t get it. My site has a favicon.icon in 32*32 and 16*16 pixels, linked in the code of each page and yet IE7 doesn’t play ball. And yet I look at other pages that IE7 does look at.
Same problem as Adam.. No display of my favicon at IE7.. With Firefox 2.0 works fine..
@Adam Penny, Ricardo: That was a standing issue with IE6 as well… it’s unfortunate isn’t it? IE sometimes insists on using it’s own favicon instead.
Hi John, Ricardo. It certainly is unfortunate. I can only think there must be a solution, because if you happen to use Windows Live Mail or google in IE7, their icons appear. Evidently there’s someone out there who knows the answer! Wish they’d come here and post an explanation… ’cause I sure can’t seem to find one! 😀
This didnt helped me.. As I hired a web designer for my blog… I think this is a great option for non techies like us
Ricardo, favicon.ico *not favicon.icon* should work.
That is how my Firefox bookmarks bar is set up also, with favicons only. Yes, it annoys me when sites do not have them. What I wish was that there was a way to have another bookmarks tool bar, as even with only favicons, I have run out of space.
[…] just on this particular PC, but I was able to fix it (as far as I can tell) by using this code from Monday By Noon’s article on […]