« dobox netlabel
HOWTO: replace “st.” with “saint” with PHP »

HOWTO: create a favicon.ico on Mac OS X

24th May 2005, 11:07 am

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! :)

Related items

Category: apple, cool, design, publications, tools  |  Comment (RSS)  |  Trackback
Bookmark and Share

Story pulse

WordPress database error: [You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'WHERE 1=1 AND post_id = 1081 GROUP BY hit_date' at line 5]
SELECT SUM(hit_count) AS hits, hit_date FROM WHERE 1=1 AND post_id = 1081 GROUP BY hit_date


16 Comments

  1. Callum:

    Woah! Your using K2- in the real world at last!!! And, hey - thanks for the FAQ… was just trying to get my head round that pesky favicon. Cheers!

    23 September 2005, 12:12 pm

  2. Wade:

    Thanks Steve, this process worked great. The link to IcoMaker appears to now be:

    http://www7a.biglobe.ne.jp/~ogihara/software/OSX/icom-eng.html

    5 December 2005, 10:27 pm

  3. Toby:

    My free Photoshop plugin can save (and open) ICO format files directly in Photoshop.: http://www.telegraphics.com.au/sw/#icoformat

    8 January 2006, 12:20 am

  4. GIMP:

    I didn’t know it until today, but it seems that the GIMP has good support for saving .ico files. I created a favicon.ico with 256 color and alpha-transparent 32-bit color for 16×16 and 32×32. Just paste the different sizes into an image as layers, one layer for every format. In my case, I pasted each layer twice. Then save as a file with the .ico extension. A box should appear to ask what format to save the layers as.
    The GIMP is free(GPLed) software.

    6 July 2006, 6:07 pm

  5. gaba: Favicon:

    [...] HOWTO: create a favicon.ico on Mac OS X at steve cooley presents [...]

    26 August 2006, 5:57 am

  6. edblood:

    great tutorial!!!!!

    20 November 2006, 12:58 pm

  7. Don Lapre Lover:

    I like your step by step approach. Nice writing too.

    Don Lapre Lover
    lau…@lauraglydaband.com

    18 December 2006, 2:57 am

  8. abdellah elfaize:

    Thanks a lots.

    It’s wonderful.

    If you will visit montral one day. we will offer your some nanbudo courses to recompense you.

    Take care…

    20 May 2007, 5:39 am

  9. Joanna:

    This webpage was #2 in my Google search results for “how to create a favicon mac”. I KNOW YOU.

    14 July 2007, 1:55 pm

  10. JelemyP:

    Well, be-jiggered if I can get it to work. IcoMaker did not recognise any of the pixel sizes, formats and bit-depths that I tried. Even downloading a favicon.ico from another site it was not possible to see the icon from IcoMaker. It says it cannot open eps file. Convert to png and it still cannot open.

    With a 6-pane window as it has, I would expect drag and drop compatibility, to add the icons.

    I have to give up on this little project and perhaps try PhotoShop plugin.

    30 October 2007, 3:55 pm

  11. Kate:

    Hey Steve, imagine my surprise to find this page when I did a search for favicon creation on Mac OS X. Very useful info thank you. Hope you had fun @ Educause this year?

    Cheers
    Kate (Lectopia - Educause ‘06)

    15 November 2007, 5:12 pm

  12. Jeff Barnaby:

    Hi… all of the feeds to this IcoMaker 1.1 seem to be down, would it be possible to email me a copy (pretty pleasse) ? :)

    1 January 2008, 8:00 am

  13. Eric Marden:

    I have had good success with png2ico, a command line utility for stuffing multiple png files into a Windows ICO file.

    You can easily install it on Mac OS X, if you use darwin ports, or use do a source install from: http://www.winterdrache.de/freeware/png2ico/

    4 January 2008, 9:25 am

  14. Keith:

    This was very a useful little find. Thanks for taking the time to write this tutorial and for the heads-up about IcoMaker. One thing I was unsure about was what format to save the original Photoshop file, so I opted for tiff. This worked (I initially used drag-and-drop, which worked and because I never read instructions lol) but it didn’t leave me with a transparent background on the favicon. I did only use the 16 colours option though, so I’ll have a play with it and see what I get it to do.

    Thanks again though.

    Keith

    25 January 2008, 5:07 am

  15. Lynn:

    YAY!!! Finally a helpful article to make an ico on a mac. Thanks :)

    29 January 2008, 5:43 pm

  16. rutinerad:

    If you have Photoshop (should work in most image processors), just make a 16×16px image and save it with the file name favicon.ico and it works great. If it doesn’t work with other programs, try saving as GIF and then rename it to favicon.ico.

    29 January 2008, 8:53 pm

Leave a comment