Create all favicon formats in Mac OS with Preview!

Did you know you can easily convert your website's favicon to all the necessary formats with just one tool?

That's right, Preview (an app bundled into Mac OS) is more than an image and PDF viewer. It's actually capable of performing some basic editing operations and saving in different formats.

Typically, you want to provide both PNG, ICO (Windows Icon) and ICNS (Apple Icon) files. You don't really need a favicon.gif nowadays.

TL;DR

If you already know what you need to create proper favicons and just want to know where the heck the ICO and ICNS formats are hiding when saving/exporting images in Preview I'll save you the – not so long – read: hold ⌥ (the option / alt key) while clicking on the Format dropdown in the save or export dialog.

If this explanation wasn't clear for you just continue reading ;-)

Target result

You will probably want to end up having something like this in your HTML page:

<link rel="apple-touch-icon-precomposed"
    sizes="57x57" href="favicon-apple-touch-114.png">

<link rel="apple-touch-icon-precomposed"
    sizes="114x114" href="favicon-apple-touch-114.png">

<link rel="apple-touch-icon-precomposed"
    sizes="72x72" href="favicon-apple-touch-144.png">

<link rel="apple-touch-icon-precomposed"
    sizes="144x144" href="favicon-apple-touch-144.png">

<link rel="icon" type="image/vnd.microsoft.icon"
    sizes="32x32 48x48" href="favicon.ico">

<link rel="icon" sizes="128x128" href="favicon.icns">

<link rel="icon" href="favicon.png" type="image/x-icon">

For readability's sake I've spaced the lines. As you may have noticed there are a bunch of resolutions and formats you need to cover. Don't panic, this is easier than you are thinking.

Alright, let's get to it!

Start by creating a 72dpi, 144x144 PNG version of your favicon. In the example above this would be favicon-apple-touch-144.png.

Taking that as the starting point you can create all the resolutions needed:

• PNG: 144x144, 114x114 and 32x32 (for the last one, favicon.png)
• ICNS: 128x128
• ICO: 32x32

You can, of course, use different versions of your logo, specially for small resolutions.

How to resize an image

In Preview, open the Tools menu, then Adjust Size... and choose the desired size. Remember to always use 72 pixels/inch.

How to save in different formats

When saving or exporting the image you will see a Format dropdown, but its options are limited to JPEG, OpenEXR, PDF, PNG and TIFF.

So... where are ICO and ICNS??

Here's the trick: hold ⌥ (the option / alt key) while clicking on the dropdown and voilà, you have a handful of new formats showing up, including ICNS and ICO!