Wednesday, 10 January 2007

How to create your Favicon in 3 steps


Guy Mc Paul - Daily Web Dose © 2006 - 2007 - http://dailywebdose/


A Favicon is a small logo displayed in the address bar of your browser next to the URL as well as in any tab when you are “tab browsing”. Favicon is also displayed in the bookmark title; this means that when someone bookmarks a website or blog, the icon is used as a reminder image nearby the title.


First of all you, obviously you need an image, this can be a photo, a picture or your web/blog logo. The only limitation is that eventually your favicon must be square and very small (precisely 16x16 pixels). Unless you have already an image of this size, you will have to resize the picture you wish to use as your favicon.GIF. If you have any Image editor like Photo Shop or Paint Shop, the Gimp or even simpler applications like XnView and similar you will easily resize it (16x16 pixels) using the Image Resize function and save it as “favicon.gif”, (or “favicon.ico” in case you upload it via FTP to your server root directory).

If you have none of these image editors, this is not a problem: once you have chosen your square image, just open it using Windows Paint (in Windows folder Accessories) and open your image. Save it as “favicon.gif” – so you do not spoil the original…
Then go to Image - Attributes and read the current size let us assume for instance 400x400 pixels.

Now you need to reduce it to 16x16 pixels. Go to Image - Stretch/Skew:

and Stretch the image to 4% both vertical and horizontal:

automatically the image will be reduced to the desired size:

Before you save it just control its size by going again to Image - Attributes and read the size in pixels.
Save the image on your desktop and close Paint. We have your Favicon.


It is time now to upload your favicon via FTP in your web site root directory, this is as easy as uploading your web pages.
In case you have no personal domain like a blogger2 for example you will have to upload your image in some free hosting pictures sites like Photobucket or similar. Sign up and get an account (it is free) and upload your file “favicon.gif”.

Copy to the Clipboard your favicon URL which will look something like this:


Next step implies manipulation of your web page/blog Template, therefore I strongly recommend you to save a backup copy of it.
Now open your template and write this easy line of code between the HEAD Tags:

Save your template and start also tab browsing to check if the favicon appears on the address bar and tab bar.

Bookmark this article:

BlinkList Fark FurlNewsVineRedditSimpySpurlStumbleUponTailRankTechnoratiYahoo

No comments: