Favicons are a staple of the modern web. The newer versions of every major browser support them and they are just another way for web designers to further customize the sites they design.
If you don't know what I am talking about, favicons are the little (16px by 16px) images that show up on the tabs of a web page (if you have a tabbed browser), show up in the address bar next to the address, and even show up in your bookmarks/favorites. Firefox, Safari, Opera, and even the newest version of IE support them.
On the technical side these images are rather simple. They are literally 16x16 windows icon files.
Create The Image
So, lets look at an easy way to create our favicons. Start off by making an image that looks good at 64 pixels by 64 pixels. Then shrink it down to 16 pixels by 16 pixels to see if it looks good at that size. If your image doesn't look good at that size try a different image or altering it.
This image may be your site logo or some alteration of it. Think of it as part of the brand of your site. You want people to recognize it as something from your site.
From Image to Icon
If you use Photoshop you can install a plug-in that lets you save your image as a favicon. If you're not using photoshop or don't want to install the plug-in try the free web service at dynamicdrive.com that generates the icon file from a gif, jpg, or png file. You upload the image to Dynamic Drive and download a properly formatted and sized icon file.
Add The Icon to Your Site
The last step is adding the favicon to your site. If you are using drupal, the popular content management platform, you can just upload the favicon.ico file in your theme directory and drupal will add it to your generated html.
If you need to manually add it to your page add this tag to the <head> of your page and upload the favicon.ico file to your webhost:
<link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon" />Then, just change the /path/to to the path to your favicon.ico file and your all set.
Recent comments