How to create a transparent favicon

Brian Lawlor — Sun, 27 May 2007 19:15:49 +0000

Like pretty much everything else in the shared knowledge database we call the Web, you can do a quick Google search and find useful and practical instructions on how to create a favicon. Allow me to elaborate and illustrate somewhat so you can see all the steps in more specific detail and how to do it using Photoshop Elements 5.0, the image editor all we working joes and janes are more likely to have at hand. To illustrate the basics, I’ll show you how I made the current Webdogs 2.0 favicon (you know, that cute little “{2}” thingee that appears to the left of the web address) using three character elements with a transparent background. Here’s how to do it:

1. To make a favicon you need to be able to create an image in the ICO format. Unfortunately, Photoshop Elements does not natively save or export images in the ICO format, so you need to install a plugin to fill the gap. You’re covered, mate: Download the free Telegraphics Windows Icon (ICO) file format plugin.

2. Unzip the plugin file and copy the ICOFormat.8bi file into your Plug-Ins > File Formats directory:

3. Now you’re ready to create the favicon image and save it in the ICO format. Open Photoshop Elements in the Editor view. Create a new image set at 32 x 32 pixels and name the file “favicon”:

(Yes, you could start with a 16 x 16 pixel image, but as Jennifer Apple’s tutorial aptly observes, using the larger 32 x 32 (or even larger 64 x 64 pixel) canvas gives you a much easier workspace to deal with for creating your design. But it’s your call.)

4. The initial blank image is your background layer. I’ll get back to that in step 8, below. But for now, create the second layer by selecting the Text tool to make it active and adjust the settings for the typeface, font style, font size, anti-aliasing and text color you want. In this example, I set the typeface as Georgia (love it!), font style as regular, the font size to 8 point and turned on anti-aliasing (something you almost always want to do with web typography):

To match the color of the Webdogs 2.0 logo, the text color is set to the HEX (hexadecimal) color value of #D82000 or RGB values 216,32,0:

5. Now the fun stuff starts. With the Text tool active, type the first character in the Webdogs 2.0 favicon, a left/opening curly bracket. Then use the Move tool to reposition the text character so it lines up properly. Since space is tight in this image design, I want to make the most of the image canvas so I positioned the left edge of the curly bracket one pixel past the left edge of the image:

6. Follow the same drill to create the right/closing curly bracket:

7. Ditto, to insert the number “2″. To make it fit the design better, I used a smaller 7 point character for the number. Also, in the second image below, you can see why I nudged the brackets one pixel past the left and right edges of the image, to open up the middle of the image canvas to make more room for the number character:

8. Time to deal with the transparency thing, people. Remember that first background layer? In the layer palette on the right, make the background layer transparent by clicking on the “eye” icon (no pun intended). Now the image displays in the Editor with a checkered background, telling you that the image’s background is now transparent:

9. Now resize the image down to 16 x 16 pixels with “Resample image” set to “Bicubic Sharper”:

10. You’re almost done. Now select File > Save As to save the image in the ICO (Windows ICO) format as “favicon.ico”.

You now have a favicon with a transparent background. Jennifer Apple’s tutorial explains in detail where to upload your favicon and how to tweak the HTML code so it all works properly.

One final note: You could keep the original 32 x 32 pixel proportion in your favicon image and it will still work, since current Firefox and Internet Explorer browsers will automatically resize it for you. But the favicon will invariably render better if you control the resizing down to 16 x 16 pixels, rather than leave the resizing to the whims of the browser.

Hey, get your favicon, uh … on!?! Well, you know what I mean.

Pluggin’ two WordPress plugins

Brian Lawlor — Sun, 29 Apr 2007 21:57:15 +0000

Yeah, right. Like you don’t know about WordPress plugins. Of course you do. That said, indulge me as I post briefly about my experience with one plugin you surely know about and another that maybe you don’t. Both are all but indispensable to the health of Webdogs 2.0.

The first is Akismet, an extraordinarily effective comment spam filtering system that is automatically included in current versions of WordPress. If you disable commenting in your WordPress installation, you don’t need it. But if you do allow comments, whew … will you ever need it once the comment spammers find you. And they will. Webdogs 2.0 caters to as modest a niche audience as you can have, and even it gets 500+ spam comments a week. (Ah, if only it received a real comment from time to time!) Akismet is phenomenally effective and will relieve you of what is undoubtedly the most annoying and thankless task of maintaining a blog site. But to take advantage of the Akismet plugin you have to take the initiative to activate it. And you’ll need to get a free Akismet API key to do so. Just do it.

The second WordPress plugin is Matt Read’s Custom Query String (CQS) plugin, which once installed provided me with a modest but heartfelt TIAG moment. I recently installed it to deal with the need to control how many archive and category posts are displayed at Webdogs 2.0. The WordPress admin panel offers a generic option for selecting the number of posts to display, which controls the number of posts displayed on any site page:

But what if you need or want to vary the number of posts displayed in different templates, e.g., archive or category post listings? Sure, you can hand code your templates to exploit The Loop. But for all the average joes among us holding on to their day jobs, the CQS plugin is a relatively easy install, i.e., just upload it to your plugin subdirectory and then work it from your WordPress admin panel. The CQS plugin requires no special coding and adds a nice functionality to the WordPress admin panel allowing you to customize the number of post displays for a wide array of template tags:

Counter-intuitive alert: Once installed, you locate the control panel for the CQS plugin not from “Plugins” but under “Options.” Go (con)figure.

Webdogs 3.0 » plugins

How to create a transparent favicon

Other posts of possible interest...

Pluggin’ two WordPress plugins

Other posts of possible interest...