Favicons

What is a Favicon?

Have you ever noticed that small custom icon that appears at the left side next to the Website's URL in the address bar of the Web browser? Have you ever wondered how to create these little custom icons and how to make them appear on your school Website?

This is called a "Favicon," short for favorite icon. This small addition allows you to further promote your site and create a more quality, professional and customized appearance within your visitor's browsers. The favicon reflects your organizations logo and creates a look and feel for your Website, your Blog or for your electronic portfolio.

Creating a Favicon Using Photoshop

  The fastest and easiest way to make a favicon is to use Adobe Photoshop, Photoshop Elements or Paint Shop Pro with a plugin from Telegraphics. This plugin allows these image editors to save in the Windows icon (ico) file format which is the one that is mostly used to create the favicon. Download the plugin and install it in your application.

Since it is nearly impossible to work on a image which as small as 16×16 pixels, we will start with a larger image. In your image editor, open a new file at 64×64 pixels. Design your icon on this canvas size . If you need inspiration or examples, refer to the favicons that are included here or for a larger number of examples visit Favicon from Pics, Delta • Tango • Bravo or Smashing Magazine.

Once you have finished your icon, reduce the size if the image to 16×16 pixels. In Photoshop go to Image > Image Size. In the pop up, type 16 for the width. Make sure that 16 is the height and that all the boxes are checked. In the pull down, go to Bicubic Sharper. Click OK. The new smaller icon may need some tweaking to be finished. Save As, pull down the file format to ICO (Windows Icon) and click Save.

Creating a Favicon as a Desktop Icon

If you are unable to tweak your icon to the quality you prefer in Photoshop, you might want to create it as a full desktop icon, which embeds 64×64, 32×32 and 16×16 pixels versions. Although this could slow page load the quality of the icon is worth the wait.

Opening an application such as Axialis Icon Workshop for the PC or Iconographer X for the Mac. Navigate to the hugh icon—64×64 pixels. Create your icon. The software should complete an icon at 32×32 and at 16×16 pixels size. Save As. Title the file favicon.ico. If you are using Iconographer X make sure the pull down is set to .ico. Click Save.

Creating an Animated Favicon

Open a 64×64 pixel file in an image editor such as Photoshop Elements or Image Ready. Create an animated gif. Reduced the size of the image to 16×16. Saved the file. Most other tutorials suggest the you save the file as favicon.gif, however, I suggest a different name such as animated_favicon.gif (more on this later).

Animated favicons are not treated the same by all browsers. internet Explorer, Safari, Netscape and Opera do not support animated favicons, only Firefox recognizes and uses the animations. The question might be, why brother. As browsers change and evolve there should be more support for the animated favicon. So why not be ahead of the game.

Uploading the Icon

Connect to your server. Place the favicon on the first level or in the same directory as you Home or Index page. Certain browsers will automatically see and use the icon. Others need help with this link code which is placed in the head section of each page. If you have created both a static icon as well as an animated icon, following code in the head section of your html document:

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

This is the code for the static favicon only:

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

This is the one thing that is not in other tutorials. Place both icons in the first level directory and place both codes together and browsers will select the correct code and will project the icon for that browser.

Special Tip: Favicons will not show in the Internet Explorer address bar until the web site is book marked or placed in the favorite list. For older editions of Safari the icons will not show until the icon cash is manually emptied. Go to Users and click the name next to the small house icon. Click on Library and then on Safari. Open the Icon folder and put all the subfolders to the Trash. Empty the Trash. Now the new favicon should work in Safari. Safari 3.+ is also problematic.