Okay, I recently made the cheesiest favicon evah. (A favicon is that little icon beside a url in the address bar of your browser.) December14.net gives a great explanation of how to make your own favicon.
The brief version on Windows XP is:
- Download Paint.NET.
- Resize your blank image to 16×16.
- Change your window size to 3200% (it’s a drop-down).
- Toggle grid mode on (right next to the window size drop-down).
- Make a dinky image with 16 or so colors.
- Save as favicon.png (in PNG format). It might look like this: 
- Use png2ico (warning: zip file) with syntax like “png2ico favicon.ico –color 16 favicon.png” to make your favicon.ico file. That’s two dashes before the “color.” Silly Wordpress converts it to a single long dash. Anybody know how to undo that?
- Upload the favicon.ico file to the root level of your website.
Not so hard, except for the part requiring artistic talent. That why all my doodles are geometric. 
{ 62 comments… read them below or add one }
I have the talent, but I don’t do Windows! I tried making a favicon through my Mac software, but no luck. Any suggestions?
This site gives free quality Favicons for downloading – you can also import them into an editor and add your own touches
clickfire.com/content/graphics/favicons/
Of course, you can Still import Gif or JPGs into some online editors and modify them or even combine them
I see the geometric design you intended, but I had to drag your link around in the Internet Explorer browser, put it back into the address bar, close the browser, and then re-open it…
It seems to be fine in Firefox from here…
Brian M
have you ever tried this?
http://www.favicongenerator.com/
it’s free … it kicks butt!
that stuff requires too much work.
This website lets you do it with just a photo:
http://www.chami.com/html-kit/services/favicon/
YEAHHH go geometric doodles!!!! lol
In fact it is much easier to use online converter like Online ICO converter . It has some advanced features like favicon animation. And you don’t have to install anything.
Nice post. However IE does some weird things with Favicons. It initially displays the favicon but then overwrites it. Any idea what causes that?
enclose the whole string in “code” tags.
(This probably wont render properly in a comment, if it doesn’t, I attempted to type “less than”, “code”, “greater than”, “–”, “less than”, “forward slash”, “code”, “greater than”)
<code>–</code>
You make that WAY to hard.
Step 1) Create a 16×16 image.
Step 2) Save it as a .png and use that as a fav icon – done
-or-
Step 2b) Save it as a .bmp file and rename it .ico – done
Here is the code to include in your webpage (png or ico)
Ack, it cut off my code. See the source of my website, http://www.twistermc.com, for the code.
Cool. Online web services to convert things *rule*.
I made a really cool favicon that looks much nicer than the current icon that Google uses and submitted it to them a long time ago but no one ever gave me a reply on it but can I send it over for you to look at? The one you have is really cool and I can make it a transparent background for you if you would like? Looks much nicer in your favorites with only like just the diamond showing? Try the icon on the site shown above it has a transparent bg like Yahoo’s
I’ll never forget my first favicon, took hours building up two letters (DB) at a pixel a time using some nasty favicon freeware thing. That was back when you had to have the favion link in your header. Now I just jump over to that http://www.chami.com/html-kit/services/favicon/ site that Ryan mentioned, and woof – away!
The joy of it first working is hard to remember, but I remember how exhilarated I was at the time. Did you notice that site does animated ones as well? That’s just too much imo.
Let me move my favicon over to my little bad neighborhood for show and tell.
The URL is: http://www.seobuzzbox.com/favicon.ico
and you know what rules more than favicons?
ski cap dudes!
*
Grrr what fun is show and tell if you can’t post images or character’s in here?
(my favicon is a whiskey barrel BTW)
;-(
Of course it would be the best if Google actually used that Favicon too
Just like Yandex does, which adds a bit of pizzaz to the result page (along with visual oddities) 
I’ll do it for you, Aaron:
How about other resolutions / color-depths? tsk tsk — still making Windows 3.1 16×16, 4 bit icons?
Thomas said:
>> You make that WAY to hard.
And now for the really really easy way:
1) Create an image using almost any decent format
2) Use the code:
I’ve found this to work with ico (of course), jpeg, png, bmp and gif.
The pleasantly annoying thing is that animated gifs often work fine as favicons. Surely a good way to annoy visitors just a little more.
Hmmm . . . there needs to be a guide here as to how to format comments so as to include code examples.
Oh well, nevermind. My code above which is now missing is merely the normal code for favicon but merely points out that the favion file name (and extension) can be whatever you like.
By the way, many people aren’t really aware that an ICO isn’t just like a renamed BMP, it’s actually a container of such images. You can have multiple different sizes in an icon (e.g. 16×16, and 32×32). That’s how they make windows icons scale properly (and MacOS X has some really big icons).
Also, Firefox supports icons in other image formats apart from ico – it at least supports PNG and animated GIF’s – you can actually have your favicon animated in Firefox, though it can be pretty annoying
I use Irfan View (freeware) to make favicons! You can define the transparency color, make 16px favicons and really fast some other things..
thanks matt!
paint.net nifty cool tool..thanks matt..
Hi Matts,
Any idea why your favicon does not show up in bloglines? I have the same problem ;-
The easiest is open the PNG file on your browser and save it in .ico format. That works.
Also, I would prefer a transparent background, which better looking on the toolbar.
-Haochi
A great Photoshop plug-in can be found here:
http://www.telegraphics.com.au/sw/
Hope this helps.
Please forgive my odd sense of humor, but I think Matt Cutts suggests a Matt Cutter (sharp blade tool that cuts through knots) as an appropriate icon. Hope this posts properly
Drats. Here’s the link to the icon I thought you might like: http://www.goldendoodles.com/mattcutter.jpg
Take it or leave it
Matt,
I made a favicon for you…. its over on my blog… i also did a cartoon of you to join my shoemoney toon over there
I got this WordPress theme where they use .gif instead of .ico in making favicons. Here the code
I think its more flexible that making .ico files. If I do need to make .ico, i use Axialis IconMaker
oh im sorry, the code was not displayed in previous reply. Just check the source code of my site, http://alfredo.palconit.com to see it.
Thanks,
Alfredo
http://www.myfavatar.com provides free favicons hosting. You Just need to upload an image.
Another website is http://www.favicon.ru/en . You can create a 32×32 and 48×48 icons on top of the standard 16×16 icon.
Any other site offer favicon like clickfire.com/content/graphics/favicons/ given by user “Search Engines WEB” above??
Right on this looks really cool, it’s just sooo late I’ll try it later…
will there be any difference between the different sizes? we have 32×32 on our site … looks alright but not so sure whether we should use larger ones? will it be scaled down to so-called “standard size”?
Why is it that on some sites I see the fav icons and others not?
(When there is quite clearly fav icons there)
Is it some kind of setting in IE?
Thanks.
Typically, IE requires sites to be bookmarked before favicons actually appear (and even then, after a few seconds lag). Try bookmarking those where it’s not appearing and see what happens
Hello,
I am not certain but i would almost believe that the new IE7 will have the ability to display the “favicon”, it’s unfortunate that it only displays the icon once shortcut is created or within favorites. I have gone through more complex hurdles creating my favicon on http://www.netfreez.com
Thanks,
db
The png2ico argument should be –colors, not –color.
nice to learn this. Always wondered how it was done but never bothered to search for it.
PS: verification process for adding comment on this blog is getting tougher and tougher. Single digit addition is ok but when I saw [Please add 10 and 1], I ran for my calculator:)
Favicon Battle
As already spoke Jay, I advise to look Russian on-line service on creation favicon http://favicon.ru/. Very quite good.
I love favicons…they really help to seperate one site from another
I agree with you Jonathan i also think that favicons are graet.
Also i think that it would be good if favicons would be added to website coding standards, then everyone would need to use one.
This is a cool feature but requires some skills….
Really love the favicons….
Hi there reader.
Favicon doesn’t display on my IE – Microsoft said IE5 will, but never. I bookmarked a site 3 times, repeated it few times for different sites, and still no luck
If “fav” (FAVorite) is for IE, then why not “boo” (BOOkmark) for non-IE, making it “booicon“?
If you have NO booicon yet, go ahead, put ONE inside ROOT directory of your site. Or else, don’t be surprised to see a “404 File Not Found” error entry for “favicon.ico” on your server’s log…
Mind you, Opera is now always looking for:
1) http://www.Your-Domain/favicon.ico
2) Subdomain.Your-Domain/favicon.ico
… and similar variations, if any.
That’s why there are times when a 3KB file takes the same time to load as a 30KB file, and it’s not a joke. Your booicon (or whatever when it’s not there) will be loaded BEFORE your actual contents.
Thanks.
Whoops!
I didn’t mean to make the URL in #1 to be a “click-able” one – WP saw that “www.” I guessed. Don’t click. If you do, it’s your prob… lem. hehe.
P.S. I was previously asked what’s the sum of 6+10, and now it’s 7+9. I’m waiting for 4+4+4+4 …
This ittle site will do it well, also:
http://www.html-kit.com/favicon/
Cool geometry feature!
hey matt, your blog has a great webdesign. is it a wordpress standard???
I just found one free favicon generator.
http://www.webscriptlab.com, Free and easy to use online tool that can create a favorites icon (favicon.ico) images for browser address bars, favorites and tabs, from pictures, logos and other graphics.
I haven’t seen it posted yet, but the best icon maker I have found is called Liquid Icon. It’s FREE and you can copy and paste and it resizes the logo to fit. You can create 16 x 16, 32 x 32, and 48 x 48. It’s the bomb. You can download it at http://www.x2studios.com/index.php?page=products&id=11. The best thing I’ve found. I use Fireworks to draw it up and then paste it in to there.
Ah, thanks so much for that! I’ve always wondered how to make those things – didn’t even know what it was called. Been wanting to get a favicon for my site for ages – just didn’t know how to do it, or where to find one. It would be good if someone could post how you could edit this for wordpress – that would be awesome.
Love this blog! I recently found this online generator to make my favicons—
Quick Favicon There are a lot of them out there. I also recommend downloading The Gimp Gimp It’s open source and can do just about anything Photo Shop can do. I also recommend Irfan View Irfan And if you can manage to find the free version of “Faststone” (not free anymore) which I have. These will do any novice well!
Many browsers display favicons no that aren’t the .ico file type. For example could just as easily save your favicon as a .png, .gif, or .jpg and it will show up fine.
The favicon gallery at favtastic.com has plenty of favicons on it that aren’t just .ico images. Check it out.
Wow! Interesting! I’m going to try this myself and see if I can make a favicon for the sites I’m handling lately. I’m sure this will impress my boss. Thanks and I wish you all the best.
Hi Matt
about favicon : google just changed its G favicon for a g !!
did you not it ?
regards
ouali benmeziane
search industry
Why not blog about Google’s new favicon?
—-QUOTE—-
That’s two dashes before the “color.” Silly Wordpress converts it to a single long dash. Anybody know how to undo that?
—-QUOTE—-
In typography two hyphens are common shorthand for the em-dash (long dash), since only hyphens are available on the keyboard. MSWord does the same replacement. But even if an em-dash is what you want, common webfonts seem to display this a bit too short, hardly distinguishable from the hyphen.
A thread in the Worpress forum talks about commenting out a couple of lines of code that performs the replacement:
http://wordpress.org/support/topic/27265