Create a Favicon for Your Web Site
By Stephen Bucaro
A favicon (short for favorites icon), is a small icon that appears to the left
of the address in the address bar of your Web browser. A Web site's favicon also
appears to the left of bookmarks or favorites. Having a favicon makes your Web
site more professional and is an element of branding. Fortunately, the process
of creating a favicon is very easy.
You can use Adobe Photoshop to create your favicon, but since you may be like
me and can't afford to burn hundred dollar bills like cigars, I'll explain how to
do it with the free open source GIMP
graphics application.
1. In the GIMP Toolbox menu, select File | New...
2. In the Create New Image dialog box that appears, set the image size
to 16 x 16 pixels, then click on the [OK] button.
3. In the in the menu of the Edit window that appears, choose View | Zoom
and zoom in to least 800 percent.
4. In the Edit window menu choose View | Show Grid, then choose Image
| Configure Grid....
5. In the Configure Image Grid dialog box that appears, set the grid
spacing Height and Width each to 1 pixel.
6. In the GIMP Toolbox select the pencil tool, and configure the pencil tool to pixel(1x1 square).
7. In the GIMP Toolbox double-click on the forground color square and, in the
Change Foreground Color dialog box that appears, select a color, then click
on the [OK] button.
You are now ready to draw your favicon on a pixel-by-pixel basis.
If you don't care to work on a pixel-by-pixel basis, draw or select a square
image of any size (should be relatively small) and in the GIMP Toolbox menu,
select File | Open... and open the file in GIMP.
In the Edit window menu choose Image | Scale Image..., then in the
Scale Image dialog box that appears, set the Height and Width
of the image to 16 x 16 pixels, Then click on the [Scale] button.
8. When you have competed your image, in the Edit window menu choose File | Save as...
9. In the Save Image dialog box that appears, in the Name text
box enter the name favicon and click on the [x] box next to "Select File
Type (By Extension)", and in the File Type list, select "Microsoft Windows
icon (ico)", then click on the [Save] button.
10. Upload the favicon image file to your Web site's root folder (the top-level
folder). Now when a Web browser visits your Web site, it will display your
favicon in the address bar and in the favorites list.
If you want to use an image file format other than Microsoft Windows icon, you'll
need to place a link similar to the one shown below in the head section of every
page of your Web site.
<link rel="shortcut icon" type="image/png" href="/path/image.png" />
There are several Web sites where you create favicons online for free:
• degraeve.com
• favicon.cc
• List of Online Favicon Generators
You can use one of these Web sites to draw your favicon and then save it to your hard drive.
Having a favicon makes your Web site more professional and is an element of
branding. Fortunately, the process of creating a favicon is very easy.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
