Web Design Tips : Favicons
Favicons are the little 16x16 icons that appear in the url address bar of browsers. They also appear in browsers favorites lists, and on tabs in tabbed browsers. They're usually just a smaller version of the company's logo. Though not vitally important, a favicon can add a sense of professional branding and identity to a web site.
 |
Making a favicon is fairly straitforward. First you create your icon in a larger size say 100 x 100, using a program such as Adobe Photoshop. If you download a Photoshop plugin for .ico (Windows icon)files, you can save the icon as favicon.ico to the root folder where your index.html file is located. Then you are done. However, if you don't have the plugin, then you can save your icon as a .gif file. This is necessary especially if you have any transparency in your icon. Save it as favicon.gif to the same directory as your index.html. Then you need to open up a windows command window, navigate to root folder where the favicon.gif is located and rename it to favicon.ico. The .ico file created in this manner will work on all browsers except Internet Explorer. Therefore it is recommended to use the plugin for complete cross browser support.
|
|
| 100 x 100 logo.gif | 16 x 16 favicon.ico |
You must then place the following code in the head section of your index.html. Once you upload the favicon.ico to the home directory of your site, you may have to refresh the cache of your browser before you start seeing the favicon in your tab or url address bar.