Favicon: A Rough Guide
Monday, November 26th, 2007 at 2:14 am
I know fresh content has been scarce around Blogsolid for the last couple of weeks and there is no excuse other than the “year-end-madness”. I’m sure many of you know what I’m talking about. My new year’s resolution will be to structure a better blogging schedule for 2008, so subscribe to Blogsolid and hang in there!
Without further ado, Favicons…
What is a favicon?
A favicon, also known as a “shortcut icon” is a small square icon that usually appears alongside the URL in the web address bar of a web browser. Some browsers allow favicons to appear in your list of bookmarks too. If you have never seen a custom icon appear next to the web address, it may be time to update your browser!
Why use a favicon?
The best reason to add a favicon to your blog is simply branding. Most new versions of browsers allow for tabbed browsing. This means that users may open several websites in the same browser window at once. A creative favicon will distinguish your blog among the many other tabs. In a great article about favicons, Perishable Press says:
Yet, beyond making it easier for people to identify and locate their favorite websites, favicons also play a critical role in site branding and product recognition. Popular browsers such as Firefox, Opera, and Internet Explorer are virtually re-branded when favicon-enabled sites are displayed.
Favicon Formats
The .ico file is probably the most commonly used and widely supported format for favicons. This format is unique in the fact that .ico allows you to incorporate several images of different sizes and bit depths into a single file. This functionality is great, but it’s pretty useless for favicons since the majority of browsers only support a size of 16×16 pixels. Image formats such as .gif and .png are also commonly used for favicons. You can even add some fun to your blog by using an animated gif as a favicon. As far as I know these are only supported in Mozilla Firefox, but Wikipedia explains how you can incorporate links to more than one version of favicon to ensure yours shows up in most browsers.
Designing your favicon
Designing a creative and interesting favicon is fun. The challenge lies in the tiny size of the graphic – only 16×16 pixels. You could design a larger square graphic, like 64×64 pixels and then scale it down, but sometimes this is not effective since detail tends to become fuzzy when the image is shrunk.
If you have Adobe Photoshop, there is a handy free plugin that allows you to save graphics in the .ico format. Jennifer Apple has a tutorial on creating favicons in Photoshop.
A Google search reveals a large number of websites that assist you in generating a favicon by uploading an image and others even allow you to create an image online which is then converted to a .ico file.
For some favicon design inspiration, check out:
The code
Once you have created your 16×16 work of art, it is time to display it on your site. A good idea is to name the file favicon.ico and upload it to the root folder of your blog. Some browsers will automatically detect your favicon and display it. It is a good idea to add some code within the <head> tag of your HTML to tell browsers about your favicon, especially if you have opted to go with a format other than .ico or if for some reason you have chosen to place the favicon in a directory other than the root folder of your blog.
What is this code supposed to look like?
I prefer learning by example, so let’s take a look at how some of the pros go about it:
Cameron Moll
The favicon.ico file is simply placed in the root directory of the site without linking it in the XHTML 1.0 Transitional document. The favicon is automatically detected.
Jakob Nielsen
The well known usability expert places the following code in the head of his HTML 4.0 Transitional document:
<link rel="shortcut icon" href="/favicon.ico">
Jeffrey Zeldman
The favicon.ico file resides in the root directory of the site and the following code appears within the head of the XHTML 1.0 Transitional document:
<link rel="Shortcut Icon" type="image/x-icon" href="/favicon.ico" mce_href="/favicon.ico" />
Jonathan Snook
Like Moll, the favicon.ico file is placed in the root directory of the site with no link in his HTML 4.01 document.
Matt Mullenweg
The favicon.ico file resides in the root directory of the site and the following code appears within the head of the XHTML 1.0 Transitional document:
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
Veerle Peters
Peters includes links to two different favicon formats and lets the browser decide. One is the regular .ico and the other is a .png. The following code appears in the head of her XHTML 1.0 Strict document:
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.png" type="image/png" />
Virb
These guys use a .gif image. The following code appears within the head of the XHTML 1.0 Transitional document:
<link rel="icon" type="image/gif" href="/_graphics/favicon.gif" />
That’s it. A favicon is the ideal Christmas gift for your blog! If you know more secrets about favicons, please don’t hesitate to share your knowledge in comments.
Nirav Says:
November 26th, 2007 at 2:49 am
Good article. Since browsers sometimes (used to?) just look for a favicon.ico file in the root directory of the site, I make my favicons in Photoshop, save as “favicon.gif” (as a GIF, obviously) and then rename them to “favicon.ico”. Works well for me.
Milan Says:
November 26th, 2007 at 9:31 am
Hi nice article an very helpfull tips and links! Thanks a lot
redwall_hp Says:
November 26th, 2007 at 5:29 pm
The .ico format is supported by IE 5+. I believe IE5 was the first browser to support favicons (another proprietary thing introduced by Microsoft, then incorporated into the standard). .ico is the format Windows uses for all of it’s icons by the way.
Robert Eilers Says:
November 26th, 2007 at 8:01 pm
DynamicDrive.com has a web-based favicon generator that I personally use to create favicons. I have my name linked to a blog post I did about it.
Jeff_ Says:
November 26th, 2007 at 8:59 pm
Excellent write-up on favicons. I am honored to be mentioned here at Blogsolid! Thank you so much!
Blogsolid Says:
November 26th, 2007 at 9:35 pm
That’s interesting, redwall_hp. Can you believe IE was FIRST to actually support something good?
Thanks for the link Robert!
Anytime, Jeff! Thanks for dropping by.
Bush Mackel Says:
November 26th, 2007 at 10:44 pm
Well I guess first things first and I have to come up with some picture that represents my site. Even though it hasn’t been something on the forefront of my mind, I have thought about it for a while and come up with nothing. Maybe it’s time I got serious about it.
…
If anyone has any suggestions, I’d love to hear them. (#):)
Martin Says:
November 27th, 2007 at 12:49 am
Nice Article
The only thing i´m missing a little are online-tools for favicons like my little project http://www.favicon-generator.de – it is a gallery, too 
Blogsolid Says:
November 27th, 2007 at 1:01 am
Cool German / English favicon generator. Thanks for the link, Martin.
redwall_hp Says:
November 27th, 2007 at 1:51 am
No I can’t believe IE supported it first. Weird.
The biggest problem with favicons is trying to fit something into a 16×16 pixel image. It takes a bit of work to make something that looks good.
Julia Says:
November 27th, 2007 at 8:03 pm
Hi there! Nice one
) Thanks also to Martin for the Generator.
Imar, I’m sorry I didn’t get back to you about writing a guest post, I can only say that year end madness has gotten hold of me too. the Uni-type is the worst kind of stress… have a good few weeks til Christmas ^_^
Free Fall Creative Says:
November 27th, 2007 at 8:24 pm
Good article. Since browsers sometimes (used to?) just look for a favicon.ico file in the root directory of the site, I make my favicons in Photoshop, save as “favicon.gif” (as a GIF, obviously) and then rename them to “favicon.ico”. Works well for me.
I do the same thing when creating sites. Some people actually don’t want/ask for favicons though. Weird because I love them.
redwall_hp Says:
November 28th, 2007 at 8:47 pm
I use this great Photoshop Plug-in: http://telegraphics.com.au/sw/#icoformat
It adds a “.ico” option to the “Save As…” dialog. Renaming graphics as .ico can work in some cases, but not always (beats me why). I think the .ico format is technically just a .bmp file with a .ico extension. I just use the plug-i saves a lot of trouble.
Marie-Ange Says:
December 2nd, 2007 at 10:45 am
Thanks for the link to DynamicDrive.com! At least I have now my own favicon for my (French language, sorry…) blog about travels around the world. Your help in this way is very appreciated!…
as always…
I am convinced that favicons help to brand sites or blogs.
Blogsolid Says:
December 2nd, 2007 at 11:06 am
Hi Marie-Ange, glad you found this useful! I checked your blog now and your favicon works
redwall_hp Says:
December 5th, 2007 at 5:45 am
Marie-Ange, we don’t care if your blog is in French…that’s what Google Translate is for!
“The blogosphere (strange since I do not like that word!) Is changing: search engines cough dedicated to blogs to find a new lease of life, Technorati hesitates, and pointblog.com announced its final closure on November 22 evening.”
This is supposed to be a joke, by the way.
Bountiful Buffet of Bookmarks :: JMorris Online Says:
December 12th, 2007 at 7:44 am
[...] Blogsolid » Blog Archive » Favicon: A Rough Guide – Ideas for better blogging [...]
Healing the Body Says:
June 22nd, 2008 at 1:14 am
Here, at Cathetel.com, we were able to create a transparent favicon, which is animated on Firefox and Netscape, but static on Internet Explorer. A second file is required by the latter browser, or it will delete the favicon. Regrettably Explorer is still the more heavily used browser.
bizuteria srebrna Says:
November 30th, 2008 at 2:12 pm
Thanks
favicon generatfor Says:
December 26th, 2008 at 7:56 am
I use free tool at animatedfavicon.com. This one works great and its fast
hurtownia Says:
March 18th, 2009 at 11:59 pm
That’s interesting
Sulumits Retsambew Says:
May 6th, 2009 at 7:02 pm
Hello,
I already read your article.
You write the information that I need. I am very pleased to find that information in your blog.
Thank you for share your knowledge with us.
Good Luck.
Link exchange please..
Webtint » 15 Things: What to do before your site goes public. Says:
September 20th, 2009 at 4:44 pm
[...] Favicons – A Rough Guide [...]