10 Tips on Making an Effective Favicon

Tip One – What You Need to Add a Favicon to Your Web Site

If you want to add a Favicon to your Web site, you will need to download a plugin. The plugin that you need to download is the Windows Icon file format Photoshop plugin. The Windows Icon file format Photoshop plugin has the ability to export your icon to an .ico file format. You can find the plugin at many different Web sites online.

This program also has the ability to write and read ICO files. They can be read in one bit, four bit, and eight-bit index modes. In addition, the program can read and right 24-bit RBG modes. 32-bit XP icons with an eight-bit alpha channel are also available. You will need to download the Windows Icon file format Photoshop plugin before you can begin to create your Favicon.

Tip Two – Starting the Design of Your Favicon

There is no doubt that you may have a little bit of trouble when it comes to designing your Favicon. This is mainly because you need to design something with a 16 X 16 layout. A 16 X 16 is too small for you to be that creative. Since this size is too small, it may help if you start your project with a layout that is 64 X 64. If you insist on using a separate size, you should just use even multiples whenever you need to re size a file. In order to start your Favicon project, simply open your Photoshop program. Select “New” and choose a 64 X 64 layout. Do not be afraid to pick a different size if you believe you need to.

Tip Three – Designing Your Favicon Logo

If you already happen to have a logo for your Web site, all you need to do is reduce that logo to a 16 X 16 layout. Resize your logo and see if it works the way that you want it to work. If your logo does not look the best in the world, you will need to go back to your 64 X 64 layout and design a Favicon.

It may help if you tried creating a simple design. For example, go to one of your Web hosting sites. Take not of the colors of the Web site and the colors of the Favicon. They normally match. You should take the design of your Web site and incorporate it into your Favicon.

Tip Four – Test the Design

Once you have created your Favicon with no problem, you are ready to see if the design works. In order to resize the design and see if it looks okay in the 16 X 16 layout, click on “Resample Image”. Next you need to click on the “Bicubic Sharper” that can be found in the drop down menu. Using the bicubic sharper is the best way to make sure that your Favicon does not blur after you resize the image. If the image is not sharp enough, you can saturate the image and sharpen the image. In addition, you can make a few additional tweaks by raising the contrast of the original image. After making all of the changes that you need to make, you can resize the image again. Keep changing the icon until you believe it is perfect.

Tip Five – Saving the Custom Icon

In order to save your Favicon, you can go to “File” and click on “Save As”. Make sure that you name the file favicon.ico. When you need to select a format, select Windows Icon from the drop down menu.

Remember your icon will only be available to you if you download and install the Windows Photoshop plugin.

Tip Six – Where to Save Your Icon

Since you need to upload the file to the root folder of your Web site, you may want to save it to that location on your hard drive. This will make things easier when you go to your Web hosting service and change your Web site.

Tip Seven – Uploading the Favicon File

In order to upload the Favicon file, you will need to upload to your server. Upload the Favicon file to the Web site. Remember to place the file to the same directory that your home page is. Do not put it on your images directory. If you do that, your icon will not work. Keep it in the root folder of your Web site. Once the icon is placed in the root folder, the browser should be able to find the icon.

Tip Eight – Troubleshooting

There are a few browsers that have a hard time finding the icon. If this is the case, you can help the browser find the file by adding a link in the header of every Web page that you want the icon to appear. Try typing in the following: < link rel =”icon”href=”/favicon.ico” type=”image/x-icon” >

Tip Nine – Testing

If your icon does not appear, you may want to refresh the page. You can also clear your cache by putting a question mark at the end of the URL. This tricks the browser into thinking that the page is new.

Tip Ten – Multi Resolution Favicons

You may want to consider adding multiple versions of the .ico file. There is a plugin available that can bundle different versions of your Favicon together in one file. This becomes useful when you want the icon to look its best everywhere.