HOWTO: create a favicon.ico on Mac OS X

what with all this nice new traffic to my site thanks to the Make: blog, I figured it was high time to do a favicon.ico file for my site. On the mac, this is a snap, thanks to Takeshi Ogihara’s IcoMaker. Head over to his page (assuming it’s a he), and look for the link at the bottom of the page, something like: “IcoMaker Distribution Package, 84KB”. Download it and unpack it.

Grab whatever image you want to use for your favicon.ico file, open it in photoshop, the gimp, or whatever you have (uh… iphoto may work too?).

Reduce the imagesize to 16 pixels by 16 pixels and Save a copy.

(optional: Undo the downsizing, and re-resize the image down to 32 x 32 pixels, and save another copy. Undo the resizing again and re-re-resize the image down to 48×48, and save a third copy)

Open up Takeshi’s excellent program and select “File -> new document”. A small multi-paned window will appear with six small windows.

select “File -> Include Image…” and navigate to where your copy (or copies) are. Choose the 16 x 16 pixel copy. A dialog box will appear giving you the option to reduce the colors down to 16 colors (or just hit “ok” to leave it in as many colors as your image was in, up to 256). Depending on what you chose to do, one of the six small windows will now be populated with your image.

repeat as necessary for the other open slots, depending on how thorough you want your favicon file to be. (I just did the 16×16 @ 16 colors window, and the 32×32 @ 256 colors window.. should be good enough, I figure)

Save the file as “favicon.ico” and drop it in an accessible place for your webserver, most probably at the root level of your webserver’s documents directory. (on the Mac OS X and OS X Server, using stock Apache 1.3, it will be: /Library/Webserver/Documents/ … on apache 2.x, I believe it would be /Library/apache2/htdocs/ … If you’ve come this far, it’s probably time for you to learn where the root documents directory is on your webserver.

the last step is to put the following code in your <head> tag of your web page:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" type="image/x-icon">

that’s it, folks! :)

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter
Bookmark and Share