|
With the introduction of Apple new web browser for Mac OS X, Safari, many Macintosh users are for the first time seeing various little icons appearing next to website names in the Address bar while browsing the internet.
 |
|
Favicon for Apple Computer Australia
|
|
|
There is nothing special or magical about this icon, it is a feature that has been around for a while on PC based web browsers, but unfortunately most Macintosh web browsers haven't supported this feature until now.
However, anybody can add such an icon to their own website, regardless of the web browser you use to view it.
All that is required for you to add an icon to your own web site is to create a graphic file that conforms to certain specifications, basically creating a Windows Icon (.ico) file called favicon.ico and uploading it to the main directory of your website.
On a Mac the simplest application to create a Windows Icon file with is GraphicConverter, as it has built in support for the .ICO format and that is what we'll use for this tutorial.
get graphicconverter »
Users of Adobe Photoshop or Photoshop Elements can also create .ICO files, but will need to get a plug-in from Telegraphics to save a .ICO file.
get photoshop plug-in »
ICO files can be found in a number of formats, but the recommended format for use with a website is a 16x16 pixel graphic in 256 colours. However, any of the supported ICO formats will work and which one you use will depend on how your graphic ends looking - I personally use a 64x64, 16 colour icon on NicholasPyers.com and it works fine.
 |
|
Favicon for NicholasPyers.com
|
|
|
Converting an Existing Graphic
If you have an existing graphic you wish to use, open it up in GraphicConverter.
Then from the "Picture" Menu, select "Size". Now set both the "Width" and "Height" to 64 pixels. It is also very important that you untick the "Keep Proportions" option. Once this is done, click OK.
 |
|
GraphicConverter's Size/Scale options
|
|
|
Then again, go to the "Picture" Menu but this time choose "Color" and select "Change to 16 Colors (4-Bit).
 |
|
GraphicConverter's Color Menu
|
|
|
You are now ready to save the graphic as .ICO file.
Creating a New Graphic
If you want to create a new graphic, the simply select the "File" menu and choose "New". Then set the "Width" and "Height" to 64 pixels and the "Depth to 256 Colors (8-Bit)" and click "New".
Once the design is completed, you are ready to save the .ICO file.
 |
|
GraphicConverter's New Image dialog
|
|
|
Saving the ICO file
Once the design or conversion is done, you need the save the image as a Windows Icon (.ico) file.
Simply go to the "File" menu and select "Save As..."
 |
|
GraphicConverter's Save As dialog
|
|
|
Give the image the name of "favicon.ico" in the "Save As" box. Where you save it is up to you, but the Desktop will do for now.
If the "Set Format from Extension" option is ticked, then the "Format" should already be set to "Windows Icon (*.ICO)". If not, select the "Format" pop-up and select "Windows Icon (*.ICO)".
 |
|
GraphicConverter's File Types
|
|
|
Make sure the "Save web ready (without resources)" option is ticked. To be honest it doesn't matter that much, but it will make the file smaller (which is good for the web), but you won't get a nice preview icon in the Finder.
Now, you can click on "Save" and if all went well, the file was saved to your Desktop and you are now ready to upload it to your web server.
If you didn't set the "Height", "Width" or "Colours" correctly, then you get an error message. Go back to the Converting Existing Image section and double check everything.
 |
|
Error saving an ICO file
|
|
|
Uploading the Image
How you actually upload the image to your web server will depend entirely on how you normally upload your web pages and images. I personally use an email based system, Produced by Nemostar, but most people will use an FTP client such as Transmit or Anarchie or the built-in options included in web design packages like Adobe GoLive or Macromedia Dreamweaver.
nemostar »
However, you upload the image the main thing to get right is the location of the file. That is simply in the root directory of your website, not in a sub-directory.
In 99% of cases, this is sufficient for most web browsers that support the favicon.ico protocol to display it, but occasionally you may need to add a small piece of code to the header in each of your web pages for it to work.
< link rel="SHORTCUT ICON" href="/favicon.ico" >
If you add this code, then upload your modified pages to the web server and you are done.
Now go and test it all out by opening up your page(s) in a web browser that supports favicon.ico. On the Macintosh this includes Apple's own Safari and the Mozilla based Chimera. Unfortunately current versions of Internet Explorer nor Netscape appear to support it.
 |
|
Favicon for AUSOM
|
|
|
|
