Friday, August 25, 2006

Tutorial: Favicon

Last week I made my own favicon and successfully set it up on my blog. Look up at my url on your browser address bar. There's a cow next to it! I've made my own "cow" favicon! YEAY!

So here I wanted to share on how to create and upload your very own favicon. But first of all I think its better for me to explain first what the heck is favicon.

Explaination by Wikipedia:
A favicon (short for "favorites icon"), also known as a page icon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many graphical web browsers—such as recent versions of Internet Explorer, Firefox, Mozilla, Opera, Safari, iCab, AOL Explorer, Epiphany, Konqueror, and Flock - can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

Okay.. now for the tutorials.

1. Create a 16 x 16 pixels of an icon in image form. Save your icon as .jpeg (you can also save it as .png or .gif)
  • Your favicon must have some association to your blog. In my case, my blog's name is "How Now Pale Cow"; so an icon of a cow would be the most suitable to represent my blog.
  • I made my 16 x 16 icon using Macromedia Fireworks
  • But if you don't have any graphic software, you can also build your favicon online at
2. Okay here's my finished cow icon in .jpeg.

3. Now you need to convert your .jpeg to a .ico file. You can use this online tool:
4. Download the icon and now you have to upload it online. If you're using a blogger platform, you need to find a webhost to upload your favicon. In this case, I used Geocities.

5. Once you have uploaded to a webspace of your choice, paste the code between the head tags in your template as follows:

Replace "" with the URL of the address of your icon, & paste the code between the head tags of your blog. The favicon will appear in the address bar of the majority of browsers, and in the bookmark lists of people who bookmark your site.

6. You may need to force a refresh before you see a difference (also some older browsers don't support favicons). Sometimes, changes have been changed to the template and have been previewed, saved and republished successfully, but the changes are not reflected on the blog when you view it. When you face problem like these, perhaps they are just due to a cache problem.

There are 2 ways to force a refresh:-

1. Try adding a "?" to the end of the blog url into the address bar and press the ENTER key. (This tip was given by Rose DesRochers).

For example, like this: If you see the new posts or the new changes, then it is confirmed it is only due to a cache problem. You have nothing to worry about as others will be able to view the new posts. The problem only exists on your computer.

2. If you want that resolved too, try clearing the cache (temporary Internet files).

P.s: I have discovered that the favicon doesn't appear in IE6 and lower. But it does work with IE7, Firefox and Opera.

Labels: ,


blog comments powered by Disqus

Older Posts    Home    Newer Posts
Related Posts Plugin for WordPress, Blogger...