My Coffee Cup Icon

Posted on Thursday 17 June 2010

So as you may ( or not ) have noticed I’ve been doing a little tinkering with my blog over the last little while.

The most noticeable change is the Coffee Cup icon and in case you hadn’t noticed I’ve actually done two different things with it.

The first one was pretty straight forward. I just added it to the bottom of my posting. I think it helps  to identify the break between one article ( including any comments ) and the next.  It also helped to tell me that I was done with it ( in that I can now sit back and enjoy my coffee. )

The second icon is more subtle, but actually took me a long while to figure out ( like over two years to be exact…. )

What I’m referring to is the small icon that now shows up in your web address, and if you were to bookmark my site in the bookmark as well. This one really took me quite a while to track down and get operational.

Suffice to say, it all starts with web-page envy. From time to time I would come across a website that had one of these cool icons in it’s address and I thought it looked great. I also noticed that for me ( and I suspect the average reader ) it helped me to identify the website quicker when I was looking for it. It also was a huge advantage when I put the link on Internet Explorers Favourites or Mozilla’s Bookmark Toolbar ( that little bar across the top of your web browser ) more compact in that I didn’t need to put a name beside it – the icon spoke volumes already.

I had been studying the pages on many of these websites and couldn’t track down how this was done.  I’ve also searched Google extensively trying to find the solution and only recently did I finally come across a small web-page with the info that I was looking for. So for the benefit of those who may also be looking, here is what you need to know. All thanks to the discussion I found on Gidforums – ( )

There are two parts to this solution, and while there is some discussion ( and history ) as to whether both parts are actually needed, I recommend implementing both to ensure complete satisfaction. I also recommend changing your selected icon into the formats used in the examples. There are plenty of graphics tools out there that will do that for you, both commercial and free. The fact is that these instructions will work if you follow them exactly….. so why mess with success I say. 😀

Part One: The Title Icon

This icon is embedded within your HTML code for your web-page. The graphic ( in PNG format ) would be located where ever you keep your graphics for your web-page, in this example it would reside in the obvious directory called graphics. The code follows just after your TITLE declaration within the HEAD declaration for your home page and looks like this:

  <TITLE>Your Web-page Title</TITLE>
  <link rel="shortcut icon" href="/graphics/your-icon.png" type="image/png">

Part Two: The Favicon

This second icon is sometimes fixes the problem with the icon not always showing up in the address and/or tab. For this one you need to convert your icon to an icon or ICO format. Once that is done you need to save it in the root directory of your website with the name favicon.ico. For WordPress users this would be in your www directory.

There are apparantly some issues with icons and older versions of Internet Explorer, but the newer versions seem to be better at handling them. Also for those in a hurry to see their creation they “might” have to clear their browser or web cache first.

That’s it, that’s all. With those two steps you too can be a fancy website with it’s own website icon!


End Article

Please Add Your Comment. PLEASE NOTE: Your comments WILL be held until authorized by the webmaster.