The Favicon.ico is a very small, custom graphic that appears in the menu bar, tab, and bookmark listing for a web site. All the major sites have them - you can pick out that Google “G” a mile away, right? You don’t need to be a graphic designer to create your own. You can make one for your site in just a few quick steps.
STEP 1: CREATE THE GRAPHIC
Start with your logo or an image that you want to associate with your brand. Open the file up in your favorite graphic editing program - personally, I use Macromedia Fireworks on my PC and Adobe Photoshop on my Mac.
Crop out as much excess white space as possible. Then reduce the size of the image to 16 x 16 pixels.
If your logo does not reduce well, you may want to improvise a bit and create a modified logo using your primary logo color and the first letter of your company name, initials, or a simple graphic that you associate with your brand. Since I don’t really have a logo for this blog, I chose to create my icon using design elements from my page - the little blue boxes.
STEP 2: SAVE & NAME THE FILE
In Fireworks, I just saved my 16×16 file as a low-res gif. Then I went into Explorer (my file manager) and renamed the file favicon.ico. Easy enough!
STEP 3: UPLOAD FILE & MODIFY CODE
Once the file is renamed, upload the file to you ROOT directory for your site. Don’t put it in your images directory.
Some browsers will autodetect your favicon, but to be sure, modify your site code. If you are using a template or includes, open the file that contains your header information.
Add this line of code to the *head* segment (within the tags):
Upload the modified pages and get ready to test it out. You may need to clear your cache first, but your new icon should show up next to your site name now.
NOTES
There are some sites that will help you create your icon from your logo without using a graphics program. One I have found is Favicon Gallery. Plus there are plenty of examples of other icons there. Need more inspiration? Check out Inspire Yourself at Smashing Magazine.
Was this tutorial helpful? I’m sure this is not the only way to get this done, so if you have a better method, do share!!!
where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my 
17 Comments»
Gayla McCord
13. March 2007 | 14:43 hGreat tip!
Kian Ann
13. March 2007 | 14:56 hHey Char,
Should it be 16 x 16 or 32 x 32? Windows default size for desktop icons are 32 x 32 right?
Anyway, I tried using 32 x 32 and displayed on the browser, it works… so I guess both will work?
Char
13. March 2007 | 14:59 hKian - Everything I have read says 16×16, but perhaps the different browsers will resize accordingly. 32×32 would certainly give us more to work with. I’ll try the larger size with the next one I do - the one for my newly redesigned www.casualkeystrokes.com.
Gayla - thanks for kind words!
David Airey
13. March 2007 | 15:00 hOr you could upload your image to this website and it’ll automatically generate your favicon for you:
http://www.chami.com/html-kit/services/favicon/
Kian Ann
13. March 2007 | 15:02 hHey Char,
Sorry for the second comment - a sidetrack observation when I posted the previous comment - I clicked the SOB logo instead of the “Submit comment” the first time I used the mouse. Could this be a good place for you to put a PPC advert, or should you highlight the submit button?
Just random thoughts.
Char
13. March 2007 | 15:05 hDavid - thanks for bringing that link - that is a great option for those who aren’t as eager to get in there and mess with tiny graphics.
Kian - No apology needed!! That is one of the items on my list of things to tweak on this blog. It just might need to go higher up in the list - and now.
David Airey
13. March 2007 | 23:37 hYou’re very welcome Char.
I left you a message on MyBlogLog for the design tools I use. Please do let me know if there’s anything else you’d like for your kindness.
Phil Gerbyshak
14. March 2007 | 01:42 hGreat stuff, as I’ve come to expect from you Char.
One thing you might want to answer is why would you do this? What’s helpful about a favicon? (I know the answer, but the people who find this tip via Google or other search engine may not).
Keep up the excellent work. Always appreciate learning from you!
Char
14. March 2007 | 12:26 hPhil - other than being able to pick out your website in a sea of tabs, what other reasons make having a favicon a must?
TechZ
16. March 2007 | 17:53 hI’ve tried this numerous times, but my lack of creativity has left me with ugly icons
Going to try again soon with some changes coming to my site.
Char
16. March 2007 | 18:09 hTECHZ - remember that it doesn’t have to be anything elaborate to work. Look at mine - four colored boxes - nothing special, but it works with my blog design.
I look forward to seeing what you come up with.
Matt
17. March 2007 | 10:54 hAlways a nice tip. Glad I stumbled on this, would have forgotten it altogether.
jennessa
17. March 2007 | 12:42 hThank you for tutorials. Very useful.
Tracy
10. April 2007 | 06:56 hhi Char, how do i upload my favicon to my website hosted by blogger? can spare some time to teach me? no hurry
Jordan (MamaBlogga)
12. July 2007 | 13:44 h@Char–Other good reasons include the fact that your favicon is included next to your site name in a bookmarks/favorites file, helping to distinguish your site & remind them what site it is (especially if it’s an internal page they’ve bookmarked), and of course, branding.
@Tracy-I’m sure Char has already helped you, Tracy, but if anyone else is wondering, it’s really easy to add a favicon to Blogger. I have instructions on my blog: http://www.mamablogga.com/advice-to-mom-bloggers-headers/
JoLynn Braley
9. August 2007 | 21:46 hChar, thanks for the instructions…I’ve been meaning to create an icon for awhile now and finally did it, thanks!
Knox
26. September 2007 | 11:13 hI’m not sure that mine looks as professional as yours does, but I followed your steps and created a favicon for my blog.
Thanks for this post!