Do you know what a favicon is? Of course you do, even though you might not know that you do, you have most definitely seen favicons in actions while browsing through the web. They are infact those small icons right next to the title of a page, that can also been seen in when you bookmark a certain site in your browser. Infact we even have one here at Bloggst, which you should be able to see right now as you are reading this. The name favicon is short for "favourite icon", and originally came from when the idea behind it was to display an icon in the list of bookmarks, or favourites. These days most internet browsers support favicons in some way, some by displaying them next to the URL of the site you are viewing, and others by showing them next to the title of the page in the tab you are viewing that page.
While this might not be the most useful thing you can spend your time on, it's well worth it, because it just takes a few minutes to create and add a favicon to your blog. It will also make your blog stand out from the crowd for the reader, and help you brand it.
The first thing you will need to do when creating a favicon, is to load up your favourite image editor. I personally use
Adobe Photoshop, but it costs a bit of money, and other people prefer less expensive alternatives like for instance
GIMP which is completely free. Did that look to complicated to you? Don't worry, even a program as simple as Paint will do when you want to create a favicon.
Once you have your image editing program opened, what you should do is create a new image that is 32x32 pixels in width and height. You might be wondering why we want it to be so big? Well that is because an ICO file can contain more than one size for each icon, and incase someone wants to put your link on their desktop, it is a good idea to have that size included as well. Now go crazy on it and start making your favicon. But remember, since you want to utilize the favicon to brand your blog, you should try to include some of the visual elements that are also present on your blog's design, like for instance the colour.
When you have finished up your favicon is happy with the way it looks, save it as an image file in the PNG format. The next step is to convert your image to an icon in the ICO format. Some people like to just rename the image to favicon.ico, but this is not advisable, as it will not create a true ICO file, and will not work properly in all cases. What you should do instead is to go to
this part of the
Dynamic Drive website, which has a favicon generator tool that you can easily use to convert your PNG file to a proper favicon within your browser.
As soon as you have converted your image to a true ICO file, you will need to upload it to the root directory of your blog. That means that if your blog is published at for instance
yourdomain.com/blog/, you should upload it to the
/blog/ directory.
Now we are as good as done. There is just one more thing you need to do in order to make sure your favicon is picked up by all browsers. In the
HEAD section of your template files (somewhere between
<HEAD> and
</HEAD>) you must add in this line of code:
" <link rel="shortcut icon" href="/favicon.ico" /> "
And with that done, you have successfully added a favicon to your own blog! You might not see it immediately because of your browser's cache, but if you clean that you should be able to see it right away.
