Creating a Favicon for Your Website

Editing a favicon in GIMPWhen developing a new website, one of the last things that usually gets done is designing and creating a “favorite” icon for the site. The favicon is an icon that gets displayed in various places for your website visitors. Visitors using tabbed browsers (IE7 and 8, Firefox 2+, Chrome, Safari and Opera) will see the favicon at the left edge of the tab marker; the icon will be used in the bookmarks menu and/or toolbar when the visitor bookmarks your website; it is used as the shortcut icon on Windows when someone creates a desktop shortcut for the website and more.

Although it is possible to use GIF, PNG, JPG and BMP files as your favicon, browser support can sometimes be really inconsistent for those file formats. However, the Windows icon (ICO) format is pretty universally supported, and allows a great deal more flexibility than some of the other file formats.

Unfortunately, however, Photoshop users have probably figured out by now that PS does not support the ICO file format and are probably scratching their heads trying to figure out how to create a favicon file. There are plug-ins available for both Photoshop and Fireworks that allow designers to export images as ICO files, but those may not be ideal for all users.

Instead, you can easily download The GIMP for free (available on Windows, Linux and Mac), which has native support for ICO files.

A Nice Resource for Images and Icons

A few weeks ago, I found I needed a few icons for a project on which I was working. After a little bit of Googling, I came across the “All Free Download” Web site. Be forewarned, it is kind of a minefield of advertisement banners, but there are some great images to be found there.

Many of the images are available as vector files, allowing you to save them at basically any size you choose without worrying about degrading the visual quality of the image.

If you find yourself in need of imagery or icons for any projects, you might want to pop on over to All Free Download and see if they have anything to fit your project.

Using TimThumb with WordPress MU

A few days ago, I saw a post on Smashing Magazine outlining ten tips to give your WordPress blog a little more personality. While most of the tips don’t really apply to the blogs on which I’m currently working, tip number two piqued my interest.

Tip number two explains how to display a list of “related posts” at the bottom of each post, and tells you how to add icons to each of those related posts. Unfortunately, when I attempted to implement the tip on one of my WordPress MU blogs, I found that it didn’t work for a few reasons.

  1. The tip uses a meta element called “post-img” which, as I’ve found since attempting to implement the tip, isn’t a standard WordPress element.
  2. TimThumb doesn’t work with WordPress MU out-of-the-box.

So, I set out trying to figure out how I should implement the tip. Following are the results of my tinkering.

Identifying External Links – Like Wikipedia

Wikipedia - External Link Identification

I found myself wondering a while back how Wikipedia identifies external links the way they do. I’ve seen the same concept on many other sites, but I had never really looked into how it was done. I always just assumed that an image was dynamically added to any code that included external links.

It turns out that I was wrong, and I was kind of happy to find that out. The answer I found makes much more sense, and is much more simple to implement.