Southern New Jersey Overlook

The Favicon (pronounced fav-eye-con, shortened form of 'Favorites Icon') is used to customize the icon next to your bookmarked web site, address bar and now the browser tabs to be your own customized logo. This is useful because it will remind a visitor about your site, as your link in the favorites and tabs will stand out.

The Favicon is a normal Windows icon file (*.ico), with multi-resolution images, that is included on nearly all professional developed sites.  It generally measures 16x16 pixels and consists of  usually 16, 256 or TrueType (24-bit, 16 million) colors.  But it can also contain 32x32 and/or other resolutions, depending on needs and the flexibility of the browser.

Think of it as a visual bookmark, which links directly to your website. The Favicon allows the site a customized appearance within a visitor's browser.     Often, the Favicon reflects the look and feel of the web site or the organization's logo.  It's a great way to brand your site and help you to stand out in your viewer's favorites/bookmark menu.

Essentially, if a Firefox (or Internet Explorer) user bookmarks your site and keeps their Bookmarks (or Favorites) toolbar displayed at all times, there will always be a graphical link to your website, clickable at any moment. Now that's product placement!


Within Internet Explorer, the Favicon is displayed on the Address line and in the Favorites menu.  In Internet Explorer 7, Favicons are displayed in the address bar, all active tabs, and the Favorites menu and/or Favorites Center list. See IE7 screenshot below for Favicons encircled in red (click on image for full-size view):      

In Mozilla's Firefox browser, Favicons are displayed in the address bar, all active tabs, and the user-generated Bookmarks toolbar (text is optional). See screenshot below for red encircled Favicons (click on image for full-size view):



 
 
Creating a Favicon
Creating a Favicon is similar to creating any graphics image, except you are creating a Windows icon (*.ico) file.  You can create them using graphics programs, such as Photoshop or Paint Shop Pro, provided you have the appropriate plug-ins (available free) and the right version of the graphics program corresponding to the plug-in.  
 
You can download free or inexpensive shareware programs that are designed just for creating icon files.  You can also use online utilities that allow you to upload a jpg, gif, bmp or png image and that converts them to icons. 
 
Use this downloadable shareware program to create and edit your own Favicon manually:
http://www.easyapps.com/  for EasyIcons (and IconEasel, they are downloaded together as part of EasyApps XP).

or try this freeware program designed for creating and editing XP and Vista icons:
http://icofx.xhost.ro/  for IcoFX  (this editor now seems a little easier for me to use than EasyIcons)

Use these online tools for creating still and animated Favicons from regular images:
FavIcon Generator (online creator) - handles gifs or pngs with transparency as input.
Favicons From Pics (online creator)  [Alternate Link] - This is the one I used for my head sketch image and agency logo image.
 
Free Plugins for Photoshop and Other Software
 
Note: Some outside blogging service sites also have facilities for creating and displaying a personalized Favicon.  Blogger is not one of those, but it does allow you to edit a blog's template, wherein you can insert a link to a Favicon stored on an outside location (see details below regarding displaying on your site for the correct syntax).
  
 
Creating a Transparent Background
When designing your icon, unless your icon covers the entire canvas, you'll want to make the background transparent. This will allow the canvas of your icon to be transparent and enable the background to show through.
 
If using the EasyIcons mentioned earlier, your first step will be to click on the "Screen" button on the right-hand side of your screen. This will display the transparency lines within your left color window. To add transparency to a pixel, click on the "Flood Fill" tool (tipping paint can) on the left-hand side of your screen and fill in the pixels you'd like to make transparent (or your can select pixels one-by-one).  If using IcoFX, you will make use of the Opacity tool.
 
 
Transferring and Setting Up the Icon for Display On Your Site.
When you're finish with your icon, simply save your file with the standard name of "favicon.ico" (or any name of you choice, but keep extension as *.ico) and upload it to your server where you store your HTML files, by default your "root" directory.  

Each time a visitor adds your site to their "Favorite Places," Internet Explorer automatically searches for your favicon.ico file and displays it next to your site's link.

You can also associate the icon with your web page by saving the icon with a different file name other than "favicon.ico" and adding the following code within your web page's HTML between the <HEAD> and </HEAD> tags.

For example:

<LINK REL="shortcut icon" HREF= "http://www.yourdomain.com/favicon.ico">

or

<link rel="icon"  href="http://example.com/favicon.ico"  type="image/ico" >

Note: For XHTML, the link element must be empty: ie., terminated by "/>" (ignore quotes)

For my site, the following link was used:

<link rel="shortcut icon" href="http://www.lawrenceyerkes.com/favicon.ico" type="image/x-icon">

Note: The URL (i.e., the "http://..." part) should lead directly to your icon file.  In fact, the use of the link allows you to store it anywhere, such as in a different directory, even on another web site.


Potential Problems
I've used IE 6+ and IE7 and Firefox 2 browsers to test the display of my Favicons.   Firefox worked without any problems, consistently displaying my Favicon image in the address bar (including pull-down history), bookmark menu and active tabs.  If it doesn't display in Firefox, then you've probably done something wrong.

Internet Explorer is another issue.  With IE7, I initially had problems with it not showing up on my computer, even though other computers would display it.   Eventually I was able to get it to display,  However,  after I made a change to the Favicon image file, the old version was still displayed, instead of the new version.  

Here is my work-around, all steps may not be required in your situation, but doing all of them should allow IE7 to work for you...

1. Clear all temporary files (Tools->Internet Options->Browsing History->Delete)  [If you don't want to delete your temporarily files and other history, you can try first skipping this step to see if you can get by without having to delete them.]

2. Exit out of all windows running IE7.

3. Restart IE7 and access the web site you have properly set up for your Favicon.

You should now see the Favicon in the appropriate places.  (If it still does not show up, then check out some of the additional links below for additional troubleshooting alternatives.)

When using IE6, you must bookmark your site (add to Favorites) before your Favicon will show up.  You may also have to clear your temporary files cache, exit out of IE6 and then restart IE6 before the Favicon appears.

I also had inconsistant behavior with IE7, especially coming off of search links (no idea why, or if just coincidental), but again, exiting out of all IE windows and then reaccessing the link usually resulted in Flavicons reappearing.
 
 
Disable the personalized Favorites menu
By the  way,  if you're not keen on Internet Explorer hiding your least used Favorites, go to Tools, Internet Options... and select the Advanced tab. Scroll down until you see the option titled "Enable personalized favorites menu"; make sure it is unchecked.
 
 
Additional Comments About Browsers and Favicons
I previously mentioned that icons can be "multi-resolution" images.  When creating and editing icons,  the *.ico files have the capability to hold several image resolutions, such as 16x16 and 32x32 pixel images within the same *.ico file.  When the browser accesses them, it automatically picks the size/resolution that is best for it.   Some of the online tools (such as the Favicons From Pics) automatically generate a multi-image icon for you.  The downloadable software editors, such as EasyIcons, allow you to manipulate multi-image icons.  I should also mention that some browsers, such as Firebox, will handle additonal file types as Favicons, such as animated *.gif and *.png.
 
 
Sources:
Five Questions About Favicons
Icon Basics
FavIcon Generator (online creator)
How To Create A Favicon In Photoshop
Wikipedia - Favicons
Favicons From Pics (online creator)  [Alternate Link]
Favicon.com
EasyIcons XP (shareware software)
IcoFX (freeware software)
How To Add A Favicon To Your Site
Stay Visible to Customers With Friendly Icons
How To Make A Transparent Icon File
Free Plugins for Photoshop and Other Software
 
 
 
Visit my web site for additional services and support: LawrenceYerkes.com
  
and visit Besthomes-NJ.com to shop for the latest New Jersey Real Estate property listings (Residential, Commercial, Multi-Family, Farm, Land).   
 
Copyright 2006 by Timon, Inc. All Rights Reserved.