Ico-ifiyng Your Blog

Creating a web browser icon for your blog or web site is hardly mission critical, but in case anyone out there is looking for the easy way to do this, especially the WordPress crowd, here is how I did it with minimal fuss.

The typical method involves creating a facivon.ico image file and placing that in the root level of your web server. Generating the image file used to be rather complex, but the nifty and free (well a $5 appreciation ware fees is nice to give) ICOFormat – Windows Icon (ICO) file format Photoshop plugin does the trick. Note that the “Windows” part of that refers to the funky file format- the plugin works for both Mac and PC versions of PhotoShop.

The hard part is coming up with a decent image that works well as a 16 pixel square image. There is also the free favicon java image generator that offers a tool for creating the image as well as more info on just what the file does. Do more googling to learn about favicons. Or if you are not feeling inspired, grab a free one from the Favicon Gallery.

The PhotoShop plugin simplifies things but just allowing you to save a created or modified image in the proper file format. For my fog logo, I have a large image of my mascot, Mickey, against a white background that is part of a layer photoshop file used for the blog logo. I simple made sure the dimensions were square, whomped the image size down to 16 pixels square, and saved as a file named cdb.ico.

Now if I wanted to apply this icon to all my sites on the server, I would simply save it as a file named favicon.ico and store it at the root level on my server (I first dug up this info years ago from all the 404 errors generated in my web server logs). But CogDogBlog sites on a server that houses other sites that do not really need a dog icon logo. So I uploaded it to a subdirectory within my cdb site (/cdb/images/cdb.ico). Then, I went to my WordPress templates, and opened the editor for the Header Template (that would be Theme Editor under the Presentation tab).

Under the line that reads:

simply add the line:

where your href tag value may be different than mine depending where you store your icon file and what you name it. A key success factor is to use the link referencing scheme that starts with a “/” meaning that it starts at the root level of your web server and goes all the way down to the file location. This way, the link will work where the published file ends up in your web server directory.

Note that Firefox instantly recognizes a new icon file. Users of Safari may have to find out how to clean their browser icon cache. And IE users? I have no idea, I do not use that software. The icons are also used for RSS aggregators and I am not exactly sure how they get freshened.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon