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.

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.

Optimize Your JPEGs with PHP

If you’re anything like me, you put a lot of images and photographs on your Web site without opening them in PhotoShop to optimize them for the Web, first. Generally, if I download an image from the Web or I get an image e-mailed to me to add to the Web site, as long as it’s the right size, I just upload it and move on.

Unfortunately, however, those images are usually quite bloated and not compressed properly for the Web. With PHP, though, you can easily optimize an entire directory full of JPEG and PNG images with one simple script without losing any noticeable quality.

Accessibly Use Image Headers

A while ago, I heard rumors that the next incarnation of HTML would include support for easily replacing HTML elements (such as headers) with images by simply adding a “src” attribute to the HTML tag. For instance, you might be able to do something like:

<h1 src="myimage.png">This is my alt text</h1>

However, it seems that the advent of this type of thing, if it ever happens, is still quite a ways off. Therefore, if you’re looking for an easy way to replace a plain text header with a nice image, for instance, a banner, you need to find another way of doing so.

This article will briefly explain how to do so using purely CSS.

SlideItMoo – A Nice Javascript Image Slider

The other day, I was in need of a simple script that would allow me to set up an image slider on one of my home pages. I basically needed to set up a carousel of promotional items and allow the users to scroll through thumbnails of the various items that are available.

After some searching and testing of various scripts, I came across SlideItMoo, an image slider that uses the Mootools javascript framework and makes it very simple to set up a slider. This is my first foray into using a javascript framework (other than those that are built into other packages like WordPress).

If you’re looking for an image or banner slider/carousel script, I highly recommend checking out SlideItMoo.