Create Favicon(s)

Every time I need to create a Favicon for one of my websites I used to start googling for free or limited software then remove it afteruse only to start searching again after a couple of months once I realize I actually need to create another Favicon!

If you go through this hassle sometimes, say enough and just refer to the following links or scroll more to install a useful and FREE plugin for your Adobe Photoshop to start saving .ico files. Thus, as long as you have Adobe installed, saving .ico files will be as easy as saving JPG and GIF files.

If you don’t have Adobe

I suggest http://www.favicon.cc and http://www.htmlkit.com/services/favicon/
With these online tools, you only need to upload/import (No online registration required) an image and then download the result right away. They are powerful enough to let you create Animated Favicons.

If you have Adobe

Install the following plugin which should work with all versions including CS and

CS2 as claimed on the developers website (http://www.telegraphics.com.au/sw/) from my side I can also confirm that it worked fine with CS4 installed on Windows Vista:

  • Right click and download the following file: ICOFormat.8bi
  • Move the plugin into the File Formats folder inside your Photoshop Plugins folder located in a place similar to: (C:\Program Files\Adobe\Adobe Photoshop CS4\Plug-ins\File Formats).
  • Restart Adobe if it is open.

To use the plugin

  • .ico files will now appear in the file browser when you select Open from the File menu.
  • Save and Save As commands can now be used to create .ico files as you see from the following screen snapshot.

Adobe Plugin to save .ico files

Notes

  • The ICO format does not allow images more than 256 pixels high or wide.
  • Only Bitmap, Grey Scale, Indexed and RGB mode images, no more than 8 bits per channel, can be saved as ICO.
  • To add a Favicon to your web site create the file named favicon.ico and put it at the root level of your web site (Should be16x16 pixels to be recognised by Internet Expolorer). Then put a tag as follows in the <HEAD>…</HEAD> section of your top-level HTML pages:

<LINK REL="SHORTCUT ICON" HREF="favicon.ico">

Leave a Reply

Haider’s WebSpace
Welcome to my technical blog. This is where I write, archive and share computer related articles. Subjects vary from posting technical solutions to researching particular topics. Feel free to comment and talk IT!
Sponsored Links
Posts Calendar
September 2010
M T W T F S S
« Feb    
 12345
6789101112
13141516171819
20212223242526
27282930