So i’m thinkin that i don’t like how the W icon shows up on my site when i’m in the WordPress admin interface. As a side-effect, it becomes easy to confuse with wpo pages when i have lots of tabs open. Recently i had been looking at snapshots of my old theme design from before i upgraded WordPress, and took interest in the shapes the cut-off letters made in that header image. So i went on a quest to finally make myself a site icon.

My first stop was to Google, to find out exactly what kind of file it had to be, and how to hook it up. The familiar photomatt.net came up with the article “How To Create A Favicon,” which provided a nice walk-thru in the post as well as some useful links in the comments. The Favicon article at Wikipedia had a decent overview as well.

It turns out that traditional favicons are literally .ICO files like ones used for Windows desktop icons. Luckily, Matt’s article had plenty of links to useful utilites like this Photoshop ICO Format Plugin.

In Photoshop, i opened up my old header file, and started playing with the letters, finessing the font and size to make interesting shapes within the square block of the icon; i removed the “dot” space between the z and c, and used an italic font with nice curves. Then continuing with the negative space idea from the original miahz.com typography, i cut out the “text” from a solid gray layer leaving transparent shapes. I could have tweaked forever, but settled with this, as, at a glance it also kinda looks like the pi symbol, which was also an element of my old theme. And actually, other than that, the icon doesn’t really look like anything recognizable. But that’s kinda what i was going for.

I looked around for a simple GUI’d utility to convert and combine 16- and 32-pixel icons, but ended up restorting to the command line tool that Matt suggested in his article. Then i dropped favicon.ico in my root, hit reload, and i had myself a brand new site icon. The 1-bit .ICO transparency looks kinda shabby, but the negative-space effect definitely looks cool when the Location Bar has focus using my LCD theme on Firefox—the green glow color shines thru the cut-out text.

But all was not well. WordPress was still using it’s own icon via the <link> rule pointing to wp-images/wp-favicon.png. At first i just replaced wp-favicon.png with my own, but then realized that it might be undone during upgrades. So i dropped favicon.png in the root, and made a rewrite rule to use that one instead of WordPress’s. That took care of my original irritation.

# make WordPress use main site icon
RewriteRule ^wp-images/wp-favicon.png$ /favicon.png

And now i can identify my site amidst the dozens of browser tabs i have open. Though, i definitely prefer the clean 8-bit alpha of the PNG icons, and will <link> those on the front-end of my site when i rebuild my theme. I’m curious how other browsers and platforms use various icon sizes and formats.

Elsewhere in my wanderings, MSDN’s Icon Specification links to the ambiguous 4493.exe, which turns out to be a little utility for extracting and combining icons of various sizes and bit-depths called IconPro Icon Manager.