Favicon.ico – How To Easily Add A Favorites Icon To Your Website by Web Hosting Help Guy

Favicon.ico – How To Easily Add A Favorites Icon To Your Website

by Web Hosting Help Guy

 

Have you ever wondered what that tiny image is next to a URL in your browser’s address bar (which is usually a logo associated with the website)? Or, how you could add one to your own website?

That small image is referred to as a Favorites Icon, or better known by it’s abbreviation as a Favicon (which is usually 16×16 or 32×32 pixels in size, and has 8 or 24-bit color depth). These images also appear in a Favorites or Bookmarks list if websites on the list utilize them, and on tabs in tab-enabled browsers.

So, from a user’s perspective, Favicons act as a visual cue for easily identifying different websites in a Favorites list. And from a website owner’s perspective, it acts as a branding tool.
But not only that, if
you don’t have a Favicon, which most browsers look for these days, you will end up with a large amount of 404 errors in your server error logs just for misdirected “favicon.ico” (.ico is the Windows Icon file format) file requests. Moreover, if you have a custom 404 error file, you could end up with wasted bandwidth with all of the requests for that 404 file instead of just pulling up a smaller .ico file.
Therefore, it would be beneficial to add a Favicon to your website to help clean up your server error logs, and more importantly, add an extra step to establish your website’s identity.

Note:
Favicons can also be created in other file formats, such as PNG, GIF, JPEG, etc. However, Internet Explorer does not support these formats. The ICO format is cross-browser compatible (Internet Explorer, Google Chrome, Mozilla Firefox, Opera, and Safari).

How to create a Favicon:

Generators
Here’s a short list of various Favicon generators:

• DynamicDrive FavIcon Generator – This tool will automatically generate a .ico file and scale down its size using an image that you upload.
• Favicon.cc – This site allows you to design your Favicon using the painting/drawing tool on their website, and then generates a .ico file of your design.
• FavIcon from Pics – This can create a still or animated Favicon (.ico file) from an image that you upload.

Using Photoshop
In order to create a Favicon using Adobe Photoshop:

• Download the Windows Icon (ICO) file format plugin that allows you to export the file to the .ico format. You can download an ICO Format plugin for Photoshop here: http://www.telegraphics.com.au/sw/.
• Scale an image or logo down to 16×16 pixels, or you can use a 64×64 canvas to create a simple design that can be scaled down.

How to add a Favicon to your site:

Once you’ve created a Favicon by either methods, the next step is to upload the file.

• Add To Root Directory – If you have access to the root directory of your website, add the following code into the section or to any specific web page(s).

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>

• Add To Your Blog – To add a Favicon to your blog, you will have to add a plugin to the platform that you’re using. Here’s a free WordPress plugin called Shockingly Simple Favicon.

Note:
To test that your Favicon file is working, make sure to:

• Delete all of the current bookmarks to your website if you have any
• Clear your History, Cache and Recycle Bin
• Restart your computer
• Bookmark your website, and your Favicon should appear

Which method of creating a Favicon do you prefer?