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.
<link rel="icon" href="/i/favicon.png" type="image/png" />
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:
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.
@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:
@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.
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?
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.
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 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.
I'm in well late on this one, but for PC types (as it were), this freebie icon editor works a treat:
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.
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.
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! =)
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:
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.
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
Hi. My name is Jonathan Snook and this is my site. I write about what interests me, which is usually web design, development, and technology. I'm also in the middle of a food adventure and I like whisky.
I wrote SMACSS. I tweet. Want to learn more?
© Jonathan Snook