Making a Good Favicon
If ever there was a pet peeve of mine, missing or crappy favicons probably ranks pretty high (undoubtedly, higher than it should).
"A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. " ~ Wikipedia
Tied into my usual rants about personal branding, having a favicon is yet another way to establish your brand. The icons are used for bookmarks, appear in tabs making it easier to pick a site out in a sea of tabs, appear in the address bar, and are often snatched for use on other sites in blogrolls. Creating a favicon, even a basic one, is easy.
A little history of the ICO format
A common misconception is that an ICO is simply a bitmap image (BMP) with an ICO extension. Although, the ICO format stores the icons in a bitmap form, the format can actually store multiple bitmaps within it. Each bitmap can be a different size and of a different bit depth including support for alpha transparencies. Download my favicon and you'll notice that it looks really good as a desktop icon! (I have 16x16, 32x32 and 64x64 pixel versions in there.)
Making a favicon
Browsers these days support pretty much any image format such as GIF and PNG. I've even seen some sites use animated GIFs for favicons! So, you could easily export a file from your favourite design app and be done with it.
If you want to take your icons to the next level, I highly recommend you get your hands on a decent icon tool. There's a plugin for Photoshop that I have not personally used but that would probably do the trick.
I actually use Icon Craft. The interface isn't spectacular (it's downright awful!) but it works really well at setting up each of the formats that I want to embed in the file. The software itself is jam packed with features designed to make it easier to create favicons within the editor. I find the editor just too confusing to make heads or tails of it, though.
Instead, I use Fireworks to create a PNG of the appropriate size. I make sure everything looks pixel perfect, including any alpha transparency I might want to include. Then I import the PNG into Icon Craft which retains all the transparency information. I can resize down right from within Icon Craft but if the effect doesn't look good, I'll create the the smaller versions in Fireworks as well and then re-import it into Icon Craft.
Keep in mind that your icon should ideally be under 20k which isn't a problem if you only plan to store the 16x16 and maybe a 32x32 version in there. Some sites apparently have size restrictions on the size of favicons that they accept.
Adding favicon to a site
Adding a favicon to a site is really easy. Easiest of all is just to drop the favicon.ico file into the root of your site. You may have to clear your cache or restart your browser before you see an update. Alternatively, you can add the following HTML to the head of your page:
<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon">That's it!
Conversation
I'm not picking at all but this is really funny when I read it.
"I can resize down right from within Icon Craft but if the effect doesn't look good, I'll create the the smaller versions in Firefox as well and then re-import it into Icon Craft."
Firefox? Fireworks? :p
png2ico is a nice alternative, although it does not have a GUI. I have used it with success several times.
png2ico takes the input files and stores them in the output file as a Windows icon resource.
Usage:
png2ico favicon.ico logo16x16.png logo32x32.png logo64x64.png
Oops, forgot the png2ico url.
Nice post. I have to say it's also one of my pet peeves. I like to put all my frequently visited sites in my bookmarks toolbar on firefox, and those sites who don't have icons take up to 4-5 times the amount of space what with the description text as well. Having a favicon just means that your site and brading become one and you instantly place them both together, removing the need for text.
PNG2ICO is a very good cmd line tool to use as well ^^
yay! now I can make my AutoHotkey generated exe files' .ico look good on both the desktop and the task bar
@dericknwg: actually it makes sense, firefox shows the favicon/image you load in it in the address bar, and then you can print screen and save it.
you can also do use semi-transparent pngs (png-8)
Eg.
<link rel="icon" href="/i/favicon.png" type="image/png" />I am working on this site, and I only did the homepage yet but the favicon is there too in place allready.
I'm in the same camp as you when it comes to sites missing favicons. I find my quick links bar looks a bit dull without them ;)
Thats why I did a bit of searching and came across this great extension for firefox: https://addons.mozilla.org/firefox/3176/
As a bonus I can also add favicons to all the bookmarklets I've written :)
@dericknwq: Man, I do that ALL the time, saying Firefox instead of Fireworks. :)
@Anthony: thanks for the link to png2ico. That's much better than paying for Icon Craft! It's now officially added to the repertoire. :)
Back in my PC days, the best program I came across for making icons was IconLover by a company called Aha-Soft. It's a little on the pricey side (comparatively... $50 USD) but it's a great program and really powerful.
I have yet to come across anything quite as nice for the Mac, but I'm sure it's out there somewhere.
One more thing... it's amazing how similar the sites for IconLover and Icon Craft are...
I've used this site before to make my favicons. Just uploead your file and click a button. I'm no expert but it does the trick for me.
@Jonathan E: they're similar because it's the same company...or at least the same address. Either way, I don't think the similarities are coincidental.
Thanks for the article, especially the reminder about multiple sizes.
So far, I've also just used the FavIcon from Pics service.
Yeah, as soon as I saw the sites I just assumed they were the same company. I didn't really dig any further though.
I'd imagine the code base for each program is very similar too.
I just save my icon as favicon.gif and rename it to favicon.ico - works great.
Nice article, but even nicer blog design! so fresh...
About refreshing the cache to clear out the favicons - it doesn't work in Safari, which is really annoying. Apple should really sort that.
I found this though - http://www.interactiverichard.co.uk/journal/clear-out-favicons-in-safari/
Explains how to do it since apple didnt build in the functionality
Here some good apps normally used to create pixel art but could be used to create those small pixel icons:
Graphics Gale
"Grafx2
This is a nice guide for creating a properly formatted favicon, but I was hoping for an article on creating a good favicon. (What are the unique design principles to be considered in this particular niche of graphics?)
The plugin for photoshop works but does a terrible job scaling down from 32x to 16x. It is much better to create each size by hand and put them together using another software tool.
I found this article from Microsoft very helpful. It outlines how to make icon for XP but can be used for favicons too. Their method allows you to create a detailed 32x icon and a less detailed 16x one so it always looks exactly how you like.
Wrong MIME type there, buddy. For .ico files, use image/vnd.microsoft.icon.
http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
@Jero: The HTML example including MIME type was taken from Wikipedia. I never use the HTML, instead just putting the icon in the root but thanks for the information.
I really like this slick "Contribute your thoughts" box. Its just ace.
Nice icon on your site - Funny I just made one this morning for my site after find this for inspiration:
http://www.smashingmagazine.com/2007/01/31/inspire-yourself-50-remarkable-favicons/
http://bla.st/design/
@Jonathan: There is a problem with just putting the icon at the siteroot. Pages viewed over https do not reliably get tagged with a favicon, and if an entire site is secured, the favicon may never appear without this sort of prompting.
This does not work, or rather, you have no debug instructions for when this does not work.
Following the simple directions, I created a 16x16 favicon.ico using the Photoshop plugin, saved it to the html site root directory, and added the appropriate link code inside the head tag. If you view the source for the page http://anarchy-tv.com , you will see the link code there inside the head tag, AND if you copy the link URL pointing at the icon in this headeer file: http://root.anarcyh-tv.com/favicon.ico and open it, you will get a Save Dialog box and can save the .ico to your desktop, confirming it exists and is in the right place. But guess what, it neighther shows up in either IE or Firefox
What a great write up. Nice article,
your favicon looks real bad i would post dumb shit like this
Thanks. Today only I was thinking of creating an icon for my blog. Your post made it easy for me.
Daaamn, this site is pretty!
Excelent colours, and the contribute your thoughts box has me impressed! One problem though, it scrolls down too far and ends up below the footer of the page.
Anyway!
Nice article, though im ashamed to say im one of those without a favicon.. but ill get on that later just because of this.
آآآآآس٠..
Man, i just needed to test this amazing AJAX Comments ..
Very slick !
روووووعة !
I also discovered another way to make favicon on linux without using png2ico. Results of my experimentations can be found in the followinf article: How to Convert a Png image to a Website Icon (favicon).
This is a very cool tutorial. Thanks
Favicons are supplemental, they're not 100% necessary and they're more for decoration not for performance. It can also eat up a lot of bandwidth.
Check out this blog entry from Scott Hanselman. He added resolutions for Vista icons with alpha transparency (big), and realized later that the 70k file was slamming his server bandwidth. Since most users' experience of icons is limited to th 16 pixel size, I'd recommend leaving out the big sizes...
im in the same boat love favicons
For the correct way to include Favicons in web pages, please refer to this page by W3C. I think it can be considered the most standards compliant?
http://www.w3.org/2005/10/howto-favicon
And funnily enough, that article refers to the Wikipedia article!
Seems even the standards are being set by wikipedia ;) (j/k)
My personal favorite is ifanview. It's a free graphic program that can be used to convert a regular image into icons in addition to a ton of other stuff
Geez, 40 comments for a favicon. Thats impressive. hehe. I have always just used the photoshop plugin for favicons, and it has worked well.
I really just wanted to post and say I like the slick new layout for comment listings. Very nice work Snook!
I use a freeware app from Extraneous Software on OS X - Iconverter saves out in various formats and is easy to use.
Iconvertor
personnally i use 2 softwares for my favicon...
PS filter (IconFactory) : Great plugins that let us set differents ico formats in one psd file.
Axialis WorkShop : To make my .ico (windows and Mac format). He's Vista new format ready (256pixels icon) too. Downside: Axialis doesn't resize well to smaller format when creating 32x32 / 16x16 / 24x24 when starting from a 128/256 pixels icon... It's a little bit 'blurry'.
Give thoses software a try... even on a 30days trial it's good :)
for the soooper-lazy (and cheap!), there's an online converter from the folks who make HTML-Kit.
it's not fancy, but it works.
I discovered when I started at my new job that the most consistent source of 404 errors in our logs was browsers looking for a favicon. That's what prompted me to make one, although my boss loves seeing the little star in the address bar. :)
Kevin beat me to it lol... the favicon creator at html-kit.com is the most painless and easiest to use.
The Firefox and Opera browsers will see a favicon without the use of the link rel code on your site. I've never had to use that code. I could speculate as to why IE doesn't, but well, that's another discussion lol
Good article. Seeing favicons in use that are just renamed bitmaps or renamed gifs is one of my pet peeves - because they don't have proper transparency or multiple sizes, they have a solid background that looks awful when viewed on a backround browser tab (one that's not the currently focussed tab). It's a small detail, but one that I always notice straight away.
So please people, don't rename your bitmaps, grab an icon editor and do it properly!
snook - I didn't even realize you posted this when I wrote my "Favicon Negligence" post over at Juxtaviews today. Great minds think alike ;P
Keep up the great work,
@luddep "I just save my icon as favicon.gif and rename it to favicon.ico - works great."
No, thats why your favicon does not show up in IE7, because IE7 checks the description in the file.
Thank Jon for the cool ideas.
Finally, someone speaks up about this. I can't begin to describe how much it aggravates me to see sites with generic favicons or none at all.
Thanks Jon!
I'm in well late on this one, but for PC types (as it were), this freebie icon editor works a treat:
Liquid Icon
Green is beatiful.
Thank you very much.
I had no idea that ICO's could store multiple images within them! That's awesome! I'm making some time this week to improve my favicon.
Hey Jon, I´m using Firefox 2.0 with the Bookmarks Toolbar, added your blog to it, but it´s not showing any icon, don´t know why. Good article anyway!!
Inspired by your post I added a favicon to my blogger blog :-). One thing I noticed is the fact that the code supplied by you is not XHTML compatible (because of the missing slash at the end) and blogger requires it to be so. You can find more details and links to free sources of icons in my blog posting.
Good article.
Amen! Missing favicons are a pet peeve of mine too— being the excessive tab junkie that I am. Thanks for a great article on the topic. The comments were also very helpful.
salut :)
Oups! it was for a test! You can delete this!
Sorry for that:( but my kids need to eat.
Favicons are becoming a must have, and I have them ;)
I use Adsen FavIcon to convert my files to .ico. It works pretty good. It automaticaly converts your favicon to a 16x16 file, at 24 bit color. It can also make your images into 32x32 program icons.
Unfortunately, I am having some problems viewing my own favicons on my computer. I think it is either an IE bug, or I have to clean my cache maybe. Do you know if you can preview a favicon from an offline site you are building, or does the site have to be uploaded on a server first? (I was going to try uploading to Yahoo Geocities as a quick test, since my domain has not cleared registration yet, but I don't think Geocities allows favicons).
I have tried some of the free sites that convert any image to a favicon, but if you start with a large image, they don't always resize well. (Especially if your image is not square). They also generally keep the same number of colors your image had originally, and if this is over 24-bit (256 colors), then your favicon probably won't work as far as I know.
Oh, and spiffy blog! =)
Excellent job!
I recently went through creating a favicon for my site and didnt have the appropriate software to create the ICO file. I used paint shop pro to create a PNG version, and was surprised to find it coudlnt write out the ICO format. I did a little writeup on a simple web based service that will convert a PNG to an ICO file for you. Its located at:
http://timarcher.com/?q=node/25
Everythere I was looking for this plugin for photoshop to create favicon for my site. Not I got it. Thank you for this.
Everythere I was looking for this plugin for photoshop to create favicon for my site. Now I got it. Thank you for this.
Finally some really good info about favicons and how to make them. Thnx
very nice article thx for all
@Snook: IE is still sticky with favicons. If I view your site with IE7 I get the IE icon. I'm guessing that since you're just putting the favicon in your root folder, and not using the html directive, your in violation of your own pet peeve!
Per Jero's comment, you'll have to use type="image/vnd.microsoft.icon".
@Amanda that's surprising. I launched IE7 and my little favicon popped into place.
Thanks Jonathan.
After reading your very helpful information, together with some useful comments from other users, I used John Dunning's Fireworks extension to add a favicon to our site and will do so for clients' sites too.
I like your "Contribute your thoughts" box too. Fab!
Ey thank you very much, great tutorial!!!
I used to use a free program called Greenfish Icon Editor Pro to make mi favicons, it's very easy to make icons with more than one image inside.
And there is also a web site for searching other webs favicons, the link is getfavicon.org When i look for your site favicon I can see it has a big resolution, nice!!!!
I agree with the last comment, your "Contribute your thoughts" box is awesome!! Did you make it yourself????
@mediocre: Yes, I made it myself. :)
Excuse me. Do not envy a sinner; you don't know what disaster awaits him.
I am from Canada and bad know English, give please true I wrote the following sentence: "Overdoing the first kiss can make people uncomfortable, as can an underwhelming smooch."
THX :-), Jafit.
That Icon craft software is real handy. It's easy-to-use and it can make some smooth icons. Never heard of the software before but certainly one of my favourites. Thanks