How to Create a Favicon for Your Website
By Kalena Jordan ©
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
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:
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 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.
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.
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
About the Author:
|Article by Kalena
Jordan, one of the first search engine optimization experts in Australia, who is
well known and respected in the industry, particularly in the U.S. As well as
running her own SEO business Web Rank (www.webrank.biz), Kalena manages Search Engine College (www.searchenginecollege.com), an online training institution
offering instructor-led short courses and downloadable self-study courses in
Search Engine Optimization and Search Engine Marketing subjects.