Creating a Favicon with Photoshop in 3 easy steps - no plugins required!

What is a favicon?

A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. They are those little pictures you see in front of the "http" in all the urls that you surf to. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

Check your server logs, if you do not have a file named favicon.ico in the top level of your domain, you will probably notice a bunch of 404 errors in your logs. This is because someone came to your site and their browser requested a favicon.ico which was not there. You do not have to have one, their browser will just continue rendering the page if the favicon.ico is not present, but they are a fun way to "brand" your website. Some browsers use the favicon in your bookmarks as a visual way of denoting the site.

Create your own favicon.ico with Photoshop, no plugins required!

1. Open Photoshop (or any image editor) and open the image you would like to use, or create a new one. Image should be square or its proportions will get stretched in the next step.
2. Squash or crop the image down to 16x16 pixels @72 dpi using the Image > Image Size dialogue box. Resample image must be checked as you are throwing a ton of pixels away, constrain proportions should be checked if you are starting with a square image, uncheck if you are squashing a rectangular image into a square.
3. Save the file and name it favicon and change the format to BMP. When the BMP options dialogue comes up check Windows and check 16-bit. Save it, you should now have a file called favicon.bmp. Outside of Photoshop, locate the file and rename it favicon.ico. In MacOSX click the filename once and change the extension from .bmp to .ico. You will be asked if you really want to do this, you do!
   Move the file to the top level of your domain with whatever FTP software you use.

Linking to favicon.ico Files

Different web browsers support favicons differently and some browsers benefit from a direct link in the HTML source code to the favicon.ico file. You should add this code by hand in the head section of every page in the site:

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

That's it! Surf to your domain, you may have to reload, but it should show up from now on for anybody who visits your site.

Please contact us if you thought this tip was helpful - thanks.