«
»

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

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
Category: apple, cool, design, publications, tools  |  Comment (RSS)  |  Trackback
Bookmark and Share

  • 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!

  • 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!

  • 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

  • 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

  • Toby

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

  • Toby

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

  • 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.

  • 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.

  • Pingback: gaba: Favicon

  • edblood

    great tutorial!!!!!

  • edblood

    great tutorial!!!!!

  • Don Lapre Lover

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

    Don Lapre Lover
    laura@lauraglydaband.com

  • Don Lapre Lover

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

    Don Lapre Lover
    laura@lauraglydaband.com

  • 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…

  • 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…

  • Joanna

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

  • Joanna

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

  • 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.

  • 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.

  • 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)

  • 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)

  • 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) ? :)

  • 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) ? :)

  • 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/

  • 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/

  • 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

  • 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

  • Lynn

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

  • Lynn

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

  • rutinerad

    If you have Photoshop (should work in most image processors), just make a 16x16px 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.

  • rutinerad

    If you have Photoshop (should work in most image processors), just make a 16x16px 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.

  • antipanda

    woot! Thanks Much!

  • antipanda

    woot! Thanks Much!

  • Mark

    A very simple approach: upload your .jpg file and have this site return your favicon!
    http://tools.dynamicdrive.com/favicon/

  • frogola

    FYI Takeshi is a man’s name (so it’s a he).

  • sandyxxx

    Good, site have learned more through this site than I have through months of reading search engine optimisation and reading how to gain links books. Prehaps you can give me me some advice on how to get my wiltshire based web company to the top of search engines – help to get me comments/links and to my site?

    hot deal–

  • gisnap

    Its really cool, I came to know this really worth visiting, just bookmarked your site.

    http://gisnap.com/
    The place where fun never ends

  • Valerie Deloy Cudnik

    Thanks for this. My ‘save as ico’ broke with my Photoshop upgrade to CS5, installed the new filter, but it’s still not working, so this was a BIG help. (it was really a pain to have to use an old machine just to save my icons).

  • Jxx

    OMG! This plugin is great!! I just put in Photoshop (I have CS3) and it is right there when I want to save as etc…! Forget all these separate programs… working on photoshop is the way to go. Thank you Toby.

  • Ashabeta

    Awesome!! easy peasy!! thank you so much for this!!