Favicon using Photoshop

UPDATED 2011

In case you aren’t sure a favicon is a little 16 pixels by 16 pixels icon that appears next to a website’s URL in the address bar of a web browser.

Microsoft IE 6 for Windows will not display the favicon until the URL has been added to the favorites. They also show up in your bookmarked sites, on the tabs in tabbed browsers, and as the icon for Internet shortcuts on your desktop or other folders in Windows.

All you need to add a Favicon to your site is a Windows Icon (.ico) file usually called favicon.ico that you upload to the main directory of your website. Nowadays, most browsers besides Internet Explorer can use a GIF (including animated ones) or PNG (including full transparency) instead. But since all browsers including IE understand the .ico format, and because it’s got a lot of intriguing features that GIFs and PNGs don’t, read on to find out how to make one.

Downloading the ico plugin for photoshop

You’ll need the Windows Icon (ICO) file format Photoshop Plugin to export to the .ico file format. You can download the plugin from Telegraphics. The plugin reads and writes ICO files in 1, 4 and 8-bit Indexed and 24-bit RGB modes, and also reads and writes 32-bit “XP” icons. Make sure to install the plugin before you begin this tutorial.

Free Favicon plugin downloads:

Windows(standard ICO/favicon)

Windows(incl. Vista format icons)

Windows 64-bit(CS4 only)

Mac PS3-CSonly

Mac PS3-CSonly (incl. Vista format icons)

Mac CS2

Mac CS3+CS4(PPC+Intel)

68K Mac

An easy way to create your web site’s favourites/shortcut/bookmark icon in Photoshop. http://www.telegraphics.com.au/sw/files/ICOFormat-2.0f1-CS5.dmg

The Icon tutorial…

Because 16 x 16 is such a small canvas area, it can be very difficult to be creative. So instead start your project with a canvas set at 64 x 64. Do this by selecting File>New, and opening a new canvas that is 64 x 64 pixels in size.

The Icon Design

If you already have a logo you should reduce it to the 16 x 16 size to see if it holds up. If it doesn’t look good at this size, work with the 64 x 64 canvas and try creating a simple design that incorporates colors from your website’s palette.

When you’re ready to test the design select Image – Image Size menu and enter 16 x 16. Click on Resample Image and choose “Bicubic Sharper” from the drop-down menu (CS only for this step). This is the best setting for making sure that an image doesn’t blur as it’s being resized. If it’s still not sharp enough, go back and oversharpen, oversaturate and/or heighten the contrast of the original image and then resize it again.

If you feel the icon is not quite what you wanted, just keep tweaking it until it is perfect. At this tiny size it can take a few tries before you get it right.

Saving The Custom Icon

Go to File – Save As and make sure you name the file favicon.ico. Under Format you must choose Windows Icon (ICO) from the pulldown menu. This format will only be available in Photoshop after you download and install the plugin. In the next step you’ll need to upload this new file to the root folder of your website, so it’s a good idea to navigate and save it to that location on your hard drive now.

Uploading The Favicon.ico File

Connect to your server and upload your Favicon.ico file to your website. You must place it into the same directory as your home (index) page, and leave it loose, making sure not to put it in an images directory or other folder. The standard location is the “root” folder of your site, which is same directory as your home (index) page, not inside an images directory or other folder. If you put it there (and name it favicon.ico), most browsers will find it automatically.

Some browsers will look for a direct link in the HTML source code to your site’s favicon.ico file. You can help these browsers by adding this link in the head section of each page on which you want the Favicon.ico to appear.

Safari for the MAC will not display an updated favicon until the browser cache has been cleared.

On FireFox, clear the cache and restart the browser. On Opera, just refresh.

File Format Not Available:

The Windows Icon (ICO) file format will not be available until you have downloaded and installed the plugin, and then Quit and Restarted Photoshop.

Troubleshooting Update

One person who had trouble with Internet Explorer 7 has sent us a little tip:

I had some trouble with IE 7 — but the addition of these 2 lines of code solved the problem:

Multi-Resolution Favicons

So if you’ve gotten this far, you can already see your favicon in your browser’s address bar, and it probably looks great. Feeling ambitious and want to go one step further?

In Windows especially, favicons show up all over the place. For instance, if you put a shortcut to a website on your desktop, Windows often uses the favicon of the site as the shortcut icon. But on the desktop, Windows uses a much larger size icon, usually 48×48 pixels. When this happens, Windows has to scale up your favicon and it will probably look blurry and not so great anymore.

You can fix this. One of the neat things about .ico files is that they can contain multiple versions of the icon, at different sizes and color depths. When they do, Windows uses whichever size and color depth is most appropriate. For the sizes, 16×16, 24×24, 32×32 & 48×48 pixels are most common, and all can put bundled together in a single .ico file.

Creating a multi-resolution icon isn’t much harder than what you did to create your 16×16 favicon using photoshop. Just follow the same process.

On Windows, you may have noticed some icons on your desktop have jagged edges, while others blend smoothly on the edges. The smooth blending is because those icons contain a version with 32-bit color depth, which allows true transparency, just like your layers in Photoshop. You can create a 32-bit version of your icon, along with 24-bit (16 million colors, gif-like transparency), 16-bit (256 colors) or even 8-, 4- or 2-bit… all of which could again be stored in one .ico file!

So if you want to make sure your favicon looks great wherever people might see it, try creating a few versions in your favicon.ico file. In this way you give the user the best choice and allow for the importance of serving your icon no matter what there browser setting.

Related posts:

1. Recent Photoshop Files
2. Photoshop Workflow : Hide all other layers
3. How do I convert jpeg image transparent background
4. Eyedropper tool used outside of Photoshop
5. How do I Convert a JPG background to a transparent background GIF or PNG