Skip to content


Creating a favicon

I’m generally very spartan when it comes to my browsing habits. I surf without Java or Javascript, turn off cookie-support unless I absolutely need them, filter out Flash objects … if it’s not strictly necessary for navigation, I turn it off.

I developed this habit back when I was surfing on a dial-up connection. I was paying for internet access by the second so speed was of the essence. Anything that bogged me down was out.

One of the things I usually disable whenever I install a browser on my system is favicons. These are icons that show up on the address bar or the bookmarks of a browser. They’re usually less than 1KB in size so they weren’t exactly system-hoggers but again, if I don’t need it, I don’t want it.

Thus, the sites I maintain did not have favicons. If I didn’t feel they were necessary, why should I foist them on others?

Still, some folks may actually like those icons and I will admit there are some cool examples to be found.

I was also tired of seeing 404s because visitors couldn’t find my site’s icon when they bookmarked the site.

So, I decided to try creating a favicon for fanmode.net.

The theme I’m currently using, Vertigo, did have a favicon.ico file bundled with it but it wasn’t showing up for reasons I didn’t quite understand at first. But I’ll get to that later.

First, creating a favicon.

I began by reading up Wikipedia to understand what the whole deal with it was. Then I checked out the format. After reading about it, I realised what I wanted was a 16×16 image in either the ICO or PNG format.

As best I could tell, I had no way of creating an ICO file. Adobe Photoshop Elements, my graphics editor of choice, couldn’t save a file in that format unless I added a plugin and I didn’t feel like hunting down a plugin for a file format just to create one file.

So, a 16×16 file in the PNG-24 format then.

Next I had to come up with the design. I spent an entire minute wracking my mind thinking of something before deciding to do something very simple.

Hello, favicon.png.
Favicon
Now that I had my icon it was time to investigate how I should go about referring my visitors to the file. As I mentioned earlier, I’m using Brian Gardner’s Vertigo theme and as I also mentioned earlier, it was bundled with a favicon.ico file. However, the favicon.ico wasn’t showing up.

After looking around, I found the favicon.ico called in the header.php of the theme with the following code:
Favicon WordPress code
Since my new favicon file was a PNG file, I changed that to read:
Favicon WordPress code
Everything should be fine and dandy now, right?

Well, no. I was still seeing 404 codes for favicon requests.

The problem seemed to be the get_settings(‘home’) command which wasn’t working as intended because my WordPress directory installation wasn’t at the root directory. To fix this, I used the get_settings(‘siteurl’) instead:
Favicon WordPress code
Once I did that, I finally saw my favicon on my browser’s address bar. To celebrate, I disabled favicon-support in my browser once more.

What can I say?

Old habits die hard.

Posted in Blogging, WordPress.