Search Machines

Friday, May 4, 2012

A favicon file is an image that website designers use to replace the image that is displayed next to the URL in the browser window. With any luck at all, you should see this image in the browser window now.

It will also show up in your favorites folder next to the title when bookmarked. Pretty neat! These can be a bit tricky because of the size restrictions on these files. A complete favicon can only be 16 X 16 pixels. That is a pretty small area to work in, so you have to be creative.

The first thing you need to do is get this free photoshop plugin that allows you to save your file as an .ico file. This is the file extension you must use to create this type of image. Go here to download it. Navigate to Photoshop/Plugins/File Formats and drop the file in there.

Next you will want to create a new file in Photoshop and set it's pixel sizes to 64 X 64. This will give us a little room to work. We can then resize back to the 16 X 16 when we are done. Here is what I am starting with for my own website.

After you have something you think you like, resize it down to 16 X 16. Select from the file menu Image/Image Size and adjust. Here is what mine ended up looking like.

Once you have one that you like, you now need to save it as an .ico file. This format should now be available to you when you save as via the plugin we installed earlier. It also must be named "favicon".

Now all you need to do is upload it to your web hosting server into your root folder, and there you go!