Favicon’s for those that don’t know are the little icons that appear up in the address bar before the web address and in a users bookmark list before the webpage name. They are a small icon only 16*16 pixels in size. The purpose of this article is to give a quick run down on how to create and embed them in your website. Although they are not standard we will also include a quick rundown on how to create and use animated favicons as well.
Photoshop, Illustrator and Fireworks CS5: Favicon Creation and Embedding
For a favicon to work first it must be saved in .ico format for IE to recognise and use it. Although it is possible to use other formats (including animated gif’s) in other browsers we will stick to this format for cross browser compatibility. Also all browsers will instantly recognise and use .ico for a favicon without need for any additional coding if placed on your website root folder correctly. Embedding other formats involves adding code to each page.
Adobe Fireworks, Photoshop and illustrator do not come ready to create .ico files so first we will have to download an extension for this.
Once installed these programs will now be able to export .ico files.
To create a new favicon simply start a new document with a template of 64*64 to make things easier to work with. Once you have finished your icon resize the image to 16*16 pixels then export as .ico format.
Place the image in the root folder of your website and browsers will automatically display them in the address bar, on tabs and in favorites menus giving your site more visibility and user recognition.
To be on the safe side include this line of code in the head of your webpage to cover all bases.
<link rel="shortcut icon" href="/favicon.ico">
If you use any file type or file name other than favicon.ico you need to insert this command. If you wish to use an animated favicon it must be an animated GIF and you need to use this line in your html.