- slide 1 of 4
Favicons add character to your web site. These little icons appear in the URL address of a browser. Anyone who bookmarks your web site will see the favicon in the browser's bookmarks / favorites. Notice the yellow rectangle next to //www.brighthub.com? That's this baby's favicon.
Why add a barely visible item that is only 16x16 pixels? Because it takes little time and effort to make a favicon, especially if you already have a logo on your web site. Furthermore, it enhances your web site's brand. Many tools exist on the internet so you can make your own. Some let you simply copy and paste your logo into the tool and that's all she wrote.
- slide 3 of 4
Here are sites with tools to help you create a favicon from your logo or graphic and a description of each:
- DeGraeve.com Favicon Generator: Provides a grid for creating a Favicon from scratch as well as an import a picture tool.
- Dynamic Drive FavIcon Generator: All you need to do is browse your computer for a gif, jpg, png or bmp graphic to use as the icon. Make sure the file size doesn't exceed 150kb.
- Favicon.cc: Similar to DeGraeve.com as it provides a 16x16 grid so you can create one from scratch. It contains a color picker and import image feature.
- FavIcon from Pics: This works like Dynanamic Drive's generator. It also has a FavIcon gallery so you can see how others have shrunk their brands to create a nice looking little icon.
- Favicon.ico in Photoshop: Prefer to use Photoshop? This tutorial shows you how to create a favicon with a plugin.
These generate a file called favicon.ico. Most available online tools are a variation or identical to these.
- slide 4 of 4
How to Add it to Your Site
- Upload the favicon.ico file to your web site (use an FTP program like Filezilla or your web site's control panel like CPanel).
- Test your favicon by entering the URL of www.yoursite.com/favicon.ico where yoursite.com is your address, of course.
- Add the following line to your main index head section anywhere between <head> and </head>.
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Beware that you may not see the favicon right away or even for a day. Ask someone to check for you. A colleague had trouble seeing her site's favicon. She asked others to look and everyone saw it. Also, sometimes it won't show up due to a browser bug. It's still there, no worries.