Tweet

How to Create a Favicon for Your Web Site

Written by: Kalena Jordan

Article Overview: Ever see those little custom icons next to a web site listing in your favorites folder or on your browser address bar? Have you ever wondered how to create one for your own site? Well I'm going to teach you in this article.

How to Create a Favicon for Your Web Site

Ever see those little custom icons next to a web site listing in your favorites folder or on your browser address bar? Have you ever wondered how to create one for your own site? Well I'm going to teach you in this article.

The icons are called "favicons", a contraction of the phrase "favorite icons". To see an example, go to www.searchenginecollege.com and bookmark the site (or add to your "favorites" list). Now close your browser window and open a new one. Click on your bookmarked sites or favorites list and find the site you just bookmarked. See the tiny mortarboard graphic next to the listing? That's a favicon. It makes the site stand out from all the others in your favorites list. If you click on that site, the favicon will even load next to the URL in your browser address bar from now on.

Cool huh? Like to create a favicon for your own site? It's easier than you think. Here's what you do:

1) Choose an image or symbol that you would like to use to represent your web site. This could be a tiny version of your logo, a graphic or perhaps a stylized version of your company initials. A famous example of this is the "Y!" favicon used by Yahoo! A favicon is meant to reflect the look and feel of a web site or a company logo. Remember it needs to be simple and clear enough to have visual impact when converted to 16 x 16 pixels.

2) Take a high quality version of your chosen image in .JPG or .GIF format and if it isn't already, convert your image to the 256 color Web Safe Palette or the Windows 16 color format (the fewer colors the better).

3) Using your favorite graphics package or image manipulation software, reduce the image down to 16 pixels wide by 16 pixels high, being careful to preserve the image resolution. This is the tricky bit, because you might find your chosen image looks fantastic at the original size and downright silly at 16 x 16 pixels! Keep experimenting until you are happy with the finished icon. If you can't seem to make it work or you're short on time, you can use a free icon converter like Image Icon Converter http://www.popularshareware.com/Image-Icon-Converter-download-11313.html to convert your graphic to an icon or use an icon editor such as ImageAuthor http://imageauthor.com/ to build your icon from scratch.

4) You're nearly done! Now, take your completed icon and save it as "favicon.ico". This is the default icon name that web browsers like Internet Explorer and Netscape look for. If you want to be really clever, you can even create a customized icon for each page on your site - instructions for this can be found at www.favicon.com.

5) Take your .ico file and copy it into the the root directory of your web site (the main directory that contains all your HTML pages). Now every time a visitor bookmarks your site, your icon is copied into their cache file and displays whenever that visitor returns.

6) To test your finished favicon, get a friend or colleague to bookmark your site and then open a new browser window. You can bookmark your own site but you generally only get one attempt at this so it's best to save it for when you are sure you're happy with your finished favicon. Alternatively, dump your cache and open a new browser window between tries. If you did it correctly, you should see your shiny new favicon appear in your favorites list next to your site listing and also next to your URL in the address field of your browser.

That's it, you're done! You now have an eye-catching icon representing your web site in the favorites list of all your visitors. A professional impact for very little effort.




Copyright © 2004 by Kalena Jordan. All rights reserved under U.S. and international law.

Related Articles
  Logo Design & Your Favicon: Spotlight Your Brand Online
  The Ultimate Guide to Create Favicons
  Blog Design for Business
  How To Give Your Online Home Business A Visible Internet Presence
  How to Recover from Bankruptcy in Canada – Chapter 11

Article Tags: favicon, favicon, favorites folder, favorites list, favorites list, Yahoo



Related Forum Posts
Re: SEO... - 1: Find the Best Keywords 2: Discover Your Competitors 3: Optimize Your Title 4: Optimize Your META Tags 5: Use Headings 6: Use Title and ALT Attributes 7: Nomenclatures 8: Create a Site Map Page 9: Include a robots.txt File 10: Install a sitemap.xml for Google MySQL/Oracle:
Rich Schefren on Business Systems Video - Bigjim, 1. Create a systemized business 2. build accountability into your team 3. document your processes
Re: Hello from the UK - Hello! What part of the UK are you from? Site looks good, how are you marketing it and what do what want to achieve?
Re: Getting Press Coverage - Thanks for those extra tips again Evan. Also don't forget the 'purple cow' theory. Create something truly awesome and unique and people will pay attention, including journalists. I have some off the wall stuff planned for 2010.
Re: Eng Lit Academic Site Up For Review - Hi David Site looks good but I agree with Zacman, the header definitely needs something more on it. It doesn't need to be beautiful but it does need to catch the eye to attract people to read further. MichelleJ


Share this article with your friends. Fund someone's dream.

Leave a comment below or share on the left and you'll help support entrepreneurs in Africa through our partnership with Kiva. Over $50,000 raised and counting - Please keep sharing! Learn more.

Tweet

Newsletter

Get advice & tips from famous business
owners, new articles by entrepreneur
experts, my latest website updates, &
special sneak peaks at what's to come!

Name:
Email:

Popular Articles

Sales Training – Top Salespeople Are Not Dunces

Selling On Ebay The Good The Bad And The Ugly

Sales Courage and Resilience

Suggestions

Email us your ideas on how to make our
website more valuable! Thank you Sharon
from Toronto Salsa Lessons / Classes for
your suggestions to make the newsletter
look like the website and profile younger
entrepreneurs like Jennifer Lopez.