8.5 Favicons

Even if you haven't heard of a Favicon before, you will most certainly have seen one. You may have noticed that some webpages have a neat little logo displayed in the browser address bar before the URL, such as:

FWT Favicon

This is called a Favicon (favourites icon) and is easy to create using basic image editing software such as Paint or Photoshop. The finished image must be 16x16 pixels in size but can be created at larger multiples of this, such as 64x64 for ease of editing and then scaled down later (always use multiples of 16). The only technical bit is downloading a free plug-in for Photoshop so that the file can be saved as an .ico file. This pug-in is available at Telegraphics. Download it, unzip the contents and place the plug-in in the "plug-ins folder" in your image edititing software such as Photoshop. Your sofware can now export .ico files (if it could not already).

To create a favicon (using Photoshop):

  1. Create a new image at 64x64 pixels;
  2. Once finished, scale down to 16x16 pixels (Image>Image Size menu and enter 16 x16). Click on Resample Image and choose "Bicubic Sharper" from the drop-down menu;
  3. Save image as "favicon.ico" next to index.html (not in any subfolders, including the image folder);
  4. Add the following code into the head section of your index.html file:
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>

Troubleshooting

If, after uploading your new or revised index file to your hosting provider (see FTP), the favicon doesn't show up immediately, then try refreshing the page or clearing the cache (including the icon cache on Safari), or put a question mark (?) at the end of the URL (which tricks browsers into thinking a page is new and not cached). Internet Explorer will sometimes not display Favicons unless the URL has been added to favorites, or try clicking and jiggling on the existing Favicon (usually the browser default). This can reload the page and get the new Favicon to show up.