Zen Zoomie’s Place: Chronicles of a (Wannabe) Pro Blogger

I love the FireFox browser, and I use it almost exclusively. But I had a problem. The Firefox bookmark toolbar just didn’t have enough space to hold all of the sites I wanted to have quick access to. So I recently started using a Firefox add-on called Smart Bookmarks Bar v1.2 that lets me cram all 31 of the Blogs and other reference sites that I frequently access into a single toolbar.

It accomplishes this feat by only displaying a small icon for each of your favorite webpages. That small icon is something that’s known as a favorites icon or favicon. It’s the same graphic that shows up on the address bar of your web browser right next to the URL. Favicons have the benefit of providing a quick, memorable visual cue that a website’s visitors will associate with the site when navigating the web.

Smart Bookmarks currently looks like this on my browser:

The Smart Bookmarks Bar has clearly solved the real estate shortage, but there’s still one other problem. If the Blog author or WebMaster for the site hasn’t added a unique favicon for their webpage, it just shows up as the default blank page icon–which makes them all look alike! That’s what all the plain white pages are across the toolbar. You have to actually hover your mouse over each icon to figure out what it really is. Not optimal.

You can’t do much about the webpages you don’t own, but you can certainly correct this problem for your own website. And it turns out that it’s actually a very simple process.

Step-by-step process to add a FavIcon to your website:

1. Create a logo graphic in your graphics software of choice. I like working in PowerPoint or OpenOffice to create simple logos because of the large selection of fonts and effects you can use to manipulate text. Your image needs to be approximately square (i.e. 100×100 pixels). Don’t spend to much time on detailing your log for this purpose since it’s going to get squished down into a little tiny box when you turn it into an icon.
2. Save the image as a .jpg file.
3. Adjust the dimensions of your file or do some minor cropping as necessary using Microsoft Paint or other image editing package.
4. Confirm that your image has equal horizontal and vertical dimensions.
5. Use a free online favicon generator to convert your .jpg to a .ico file (the format your logo needs to be in to be recognized by the address bar and favorites toolbars). I used the favicon generator at http://favicongenerator.com.
6. Save the resulting favicon.ico to your computer.
7. Upload the favicon.ico file to your website using FTP or the tools provided by your web hosting provider.
8. If you’re using WordPress for your blog, insert the following code into your header.php file between <head…> and </head>. (Be sure to replace the text in red with the correct path for where you ftp’ed the file).
   

   <link rel="shortcut icon" href="<?php echo get_settings(’siteurl’); ?>/images/favicon.ico" type="image/x-icon" />

That’s all there is to it! Now when you go back to your homepage your new favicon should appear in the address bar like so:

And the Smart Bookmarks toolbar now looks like this:

Total Time Invested…less than 30 minutes. Future website visitors now have a memorable, easy visual cue that tells them they’re at Zen Zoomie’s Place: Chronicles of a (Wannabe) Blogger at a glance. And anyone that adds this website to their Smart Bookmark toolbar can now pick it out of a lineup with minimal trouble!