| How to Change your Favicon |
|
|
|
How to Change your Favicon?The word "favicon" is short for "favorites icon", and it is the 16x16-pixel icon that is associated with your website and appears in the browser address bar and favorites menu (and in Firefox and Internet Explorer 7, it also appears on the browser tab). The image below shows what your browser's address bar should look like when visiting this site.  A common mistake by many webmasters is to ignore the favicon. A good habit to get into when developing any site is to change the favaicon and use something more fitting for your site, like your logo. This article will explain how to create a favicon and then how to replace the default icon with your icon. Creating your favicon For the sake of simplicity, this section assumes you are using your logo for your icon. Step 1: Shrink your logo Using graphics software (like Adobe Fireworks or Adobe Photoshop), shrink your logo so that it will fit into a 16-pixel by 16-pixel square*. Then, save your new image as a 16x16 PNG or GIF file called "favicon.png" or "favicon.gif". * It helps if your logo has relatively square dimensions. Step 2: Convert the image to "favicon.ico" This step is actually easier than it may seem. There are several options for doing this step, but my favorite is a web-based tool by Dynamic Drive called the "FavIcon Generator". You simply click the "Browse" button to locate your favicon.png or favicon.gif file, then click the "Create Icon" button to convert your image. The generator will then provide you with a favicon.ico version of your logo. It really is that simple. » Favicon maker - Create a favicon from any image Step 3: Replace the default icon with your own The default favicon is located in the "images" directory of your website installation. For example, on this site the favicon is located at http://www.pmdstyles.com/images/favicon.ico. Remove the default icon from your site, and upload your new icon in its place. Done. You may not be able to see your new favicon right away. The reason for this is because the default icon is probably still in your browser's cache. If you clear your browser's cache, you will be able to see the new favicon. The favicon is a small thing that really will not affect the performance and look of your site, but paying attention to little details like that will give your site a more finished, professional feel. As always, please feel free to post any questions or comments. |
|
| Sunday, 09 September 2007 |
Creative Commons License