A favicon is a small icon that appears to the left of the address in the address bar of your Web browser and to the left of 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.
Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Create a Favicon for Your Web Site

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:

www.degraeve.com/favicon/
www.favicon.cc
www.favicon.co.uk

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

WordPress Security

90% of business websites have been hacked in the last 12 months. This ebook gives you a complete checklist of things you can do to secure your website without hiring a pricey web developer.

Reader John M Stokes says, "This book is a great resource for security on Wordpress and also does it very quick without having to be a long and boring. Truly worth getting to make sure your Wordpress site is as safe as possible. Click here for more information.

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268