Building BobSmithPhotography.net has stopped expanding because I've been overwhelmed with spam on the comment forums. So, if you're here and have questions about web design come and visit Forums, Blogs, Wikis dot com. It has articles that I've written, some of which are also here, and a web design forum as well so you can ask any questions you may have. There is still a lot of good stuff here though, so poke around the links and take a look.

Home » Other Tips » Graphic & Image Tips » Creating a favicon.ico file in Photoshop

Creating a favicon.ico in Photoshop 

There is a small graphic file that most people probably don't know about, but your web browser does.  It's favicon.ico and it can help your site to stand out.

Internet Explorer
If you're using IE, look up at your address bar.  It probably looks something like the following graphic.

IE address bar

If you look to the left of the address there is a small IE icon.  This particular site has a favicon, but the site has not been bookmarked so IE hasn't downloaded the file.  When the site gets bookmarked IE downloads the favicon.ico file to use in the Favorites menu.  As an example:

IE Favories Menu

If you look to the left of the highlighted menu item you will see a very small graphic.  That's my favicon.ico.  IE uses it to make it easier for you to find a site in the Favorites.  Some web statistics programs - AWstats for one - use this bit of trivia to give statistics on how many people have added your site to their favorites.  Unfortunately, Mozilla based browsers (Netscape, Firefox, Gecko) download the file so that statistic is no longer valid.  Ok, enough digression, back to the point :-)  Now that the site has been bookmarked, the icon will show up in the address bar as shown below.

IE title bar after bookmarking


FireFox
Like I mentioned, Firefox tries to download the favicon.ico file for every site it visits.  So, there's a lot less to say here - but here's a screen shot anyway.

Firefox title bar

Creating the file
I'm assuming most everyone has access to Photoshop, so that's what I'm using for my example.  For those that don't use Photoshop, the methods are really simple and should carry over to most any program.  The biggest problem you'll come up against is that not all graphics programs support the .ico format.

In fact, Photoshop doesn't natively support .ico files.  To get the support, you'll need to download this add-in from Telegraphics.  Once added you can save your image when you're finished.

This is the hardest part - you'll need to find an image that will work when shrunk down to 16x16 pixels.  Yeah, that 22mpx file from you digital back is just a tad too big for this :-)  For mine I found an image that had a pretty good contrast between subject and background.  If you can't tell (and you probably can't) mine is a recently married couple looking at each other. 

Do a 1:1 crop of your image, change the size to 16x16px, and save as a file named favicon.ico.

Ok, I really didn't use Photoshop for the example except for the plug-in.

Uploading
Now, just take the favicon.ico file you just created and upload it to your web root.  It'll be found and used. 

You can also add <link rel="Shortcut Icon" href="/favicon.ico"> to the <head> section of your page, but it's not necessary.  It may be if your site is a secure site.

Conclusion
You won't get more search engine traffic, you probably won't get any more visitors.  But, if you're looking for a way to have your site stand out from the heard, this is one simple way.

And now for some honesty - the real reason I put a favicon.ico on my site was that my log files were littered with 404 requests for it.  It's such a small file I figured I might as well go ahead and serve it.  But, now that it's there I do think it adds a little "class" to my site.

More Information
favicon primer at WebMasterWorld

Content managed by the Etomite Content Management System.