Favicons - for Beginners
The purpose if this Lens is to give a basic outline of the steps involved in adding a Favicon to a website. This Lens does not address all the digital graphic design issues involved in making an icon from scratch, except in the broadest terms, nor does it cover specific web master tasks such as "How do I upload an icon file to my web server?" Those questions, and perhaps a dozen others, are separate issues for which the answers must be found elsewhere.
What's a Favicon?
Modern operating systems and software programs are chock full of icons that come in all shapes and sizes. There are big ones, medium-sized ones, and small ones. Favicons are among the smallest.
"Favicon" is shorthand for "Favorites Icon." A Favicon is the very small graphic image that appears on the left-hand side of the address bar in your web browser, and in your browser's saved bookmarks. The image is specific to the website visited, and it is useful for quick identification of sites in your browser's bookmarks. As shown in this image, the Favicon is the small version of Squidoo's bug-eyed squid logo.
"Favicon" is shorthand for "Favorites Icon." A Favicon is the very small graphic image that appears on the left-hand side of the address bar in your web browser, and in your browser's saved bookmarks. The image is specific to the website visited, and it is useful for quick identification of sites in your browser's bookmarks. As shown in this image, the Favicon is the small version of Squidoo's bug-eyed squid logo. Why Bother?
All professionally designed websites have a Favicon. I've never seen one that did not. I assume you want your home-brewed website to look professional. People notice these things, even if they can't always put their respective fingers on each subtle clue, or admit that it makes any difference. It matters, and it's just that simple.
Besides, I only learned how to do it myself last week, and I need to write it down before I forget.
Besides, I only learned how to do it myself last week, and I need to write it down before I forget.
First . . . Catch an Icon
The main challenge with adding a Favicon to your website is finding a 16 x 16 pixel graphic that looks good. Favicons present a very small canvas to paint upon.
The green and white checkerboard image above is sixteen squares tall by sixteen squares wide, the same as a Favicon, except magnified 800%.
The image to the left shows what the big green and white checkered square looks like at normal magnification. The green squares visually blend together with the white squares to create the indistinct appearance of a fairly uniform light green.
But, this is not a graphic design tutorial, so we'll jump to a quick, easy, and free web-based solution provided by www.chami.com at FavIcon from Pics, which is a very nifty service. Here you can upload any digital photograph and it will be re-sized and converted to the .ico file format. You then download the results as a compressed .zip file.
You may need to experiment a bit before you find something that works.
The green and white checkerboard image above is sixteen squares tall by sixteen squares wide, the same as a Favicon, except magnified 800%.
The image to the left shows what the big green and white checkered square looks like at normal magnification. The green squares visually blend together with the white squares to create the indistinct appearance of a fairly uniform light green.But, this is not a graphic design tutorial, so we'll jump to a quick, easy, and free web-based solution provided by www.chami.com at FavIcon from Pics, which is a very nifty service. Here you can upload any digital photograph and it will be re-sized and converted to the .ico file format. You then download the results as a compressed .zip file.
You may need to experiment a bit before you find something that works.
Next
. . . . and Last
Upload your favicon.ico file to the root directory of your website.
Add the following bit of code to the <head> section of each .html file in the root directory of your website:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
Add the following bit of code to the <head> section of each .html file in the root directory of your website:
<link rel="icon" type="image/x-icon" href="favicon.ico" />
An Example
I started with a public domain image of earth as seen from one of the Apollo moon missions, increased the contrast a bit, and cropped it square.
I then uploaded it to FavIcon from Pics and followed the steps I've outlined above in this Lens.
You can see the result here:
Apollo Favicon Example Page
(Oh, cripes. With Internet Explorer 6, a Favicon shows up only if you bookmark a page. Sorry. Nor have I tested this with Opera, Netscape, or Safari.)
This favicon is OK. It isn't great, in my opinion, but it's OK. The favicon I use for my actual home page contains my initials:
Tom's Home Page
We're Done
That's all for now. Have fun.
New Guestbook
submit
-
Reply
- jOE w jOE w Sep 15, 2007 @ 7:09 am
- I found this site to make a favicon for my arcade.
Favicons
Two generators to choose from
by tomwfox
My blog - The Learning Curve
Former lawyer, turned computer retailer and technician, turned native American flute maker, turned graphic designer, and...
(more)
