One of the details of a website is its “favicon” - a teeny-tiny graphic that typically displays near the top of browsers, next to the web address. Every favicon is connected to the particular website you are looking at (not the browser). For example, if you were using Google in Firefox, you’d see Google’s boxy blue G favicon, like this:
Screenshot of Google's favicon

A few religious faviconsI just made a favicon for Faith and Web. If you look above, close the top of your browser, you’ll probably see a pair of red spectacles next to the URL. If you don’t, chances are you’re using a browser that doesn’t recognize favicons or your browser cache needs to be cleared.* In any event, while favicons are fresh on my mind, I thought I would let you know how to make your own and share a few generic religious ones I’ve made. I’ve put the latter in a zip file with some instructions:

Web Tools for Creating Favicons

Technically a favicon is 16×16 pixel file in a proprietary Microsoft format. Creating them is different than other graphics, but fortunately there are some web tools to create your own.

Using Photoshop to Create a Favicon

Photoshop is my method of choice. To use it, you’ll need to download the Telegraphics plug-in. It works quite easily – just using the Save As command and choosing “ICO” from the dropdown. The hard part is that it’s so small. If you are shrinking a larger graphic, a couple of tips are to start with an even size (something like 64×64 pixels) and use the Resample Image/Bicubic Sharper when reducing the size. If you want a transparent background, just hide the background before saving.

Once Created, Then What?

After you have your itty-bitty ico image, put it in the root directory of your site and upload it. For many browsers, that will be enough. But it’s also a good idea to add a line of code like the following in the header code (somewhere between the <head> and </head> tags):

<link rel=”shortcut icon” href=”http://yourwebsitename.com/favicon.ico” type=”image/vnd.microsoft.icon” />

That’s all there is to it.

See also:

* Footnote: Safari caches favicons in an unusual way. You can’t just clear the cache. You have to go to User / Library / Safari / Icons and delete the files in that folder.