Skip to content

Creating a favicon.ico with 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.
Favicon in IE
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 Favorites menu with favicon.ico
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.
favicon.ico in IE 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.
favicon.ico in FireFox

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 16×16 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 to the 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.

Published inProgramming

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *