Create a Favicon For Your Blog or Website
22 February 2008If you look up at your browser address bar here on LSB you will see a tiny picture of a pink L with a black background — That’s called a favicon. Favicon is short for Favorites Icon. A favicon can be a picture of anything; a design or symbol, letters, hearts, a stick man, even a picture of you. If you’re going to use a favicon for your site, it’s a good idea to create your own personal favicon instead of using one that belongs to someone else.
If you would like to create a favicon for your site here’s how to do it:
Get your picture. You can use any good image editor to create a small picture. For my site I used GIMP to design my personal favicon. GIMP is a great free GNU Image Manipulation Program. I created a simple 16X16 pixel picture and saved it as a .png file. You can do what I did by creating your own picture or you can simply choose any picture you like. Of course choose something that will make a good favicon.
Create it. Go to FavIcon From Pics and upload your picture. The standard size for a favicon is 16×16 or 32×32 pixels but don’t worry about the size, the image will be resized for you. Click Generate FavIcon.ico and it will create a .zip file. Your picture is now saved in the Windows Icon Format (favicon.ico). for you to download to your computer. If your image editor allows you to create a favicon.ico file (make it 16×16) just do that and skip using the FavIcon From Pics generator then go to the next step.
Upload and expand/unzip the favicon .zip file to your website’s root public directory (such as /public_html/ or /www/ or /htdocs/). I use WordPress so I uploaded it to my cpanel/File Manager/public_html file. Don’t forget to unzip it.
Finally, follow the instruction from FavIcon From Pics by going into your site index.html files and adding this html code between the <head> and </head> tags
<link href=”favicon.ico” rel=”shortcut icon” />
Save your changes and load your browser.There you have it! Your very own website favicon.
The Favicon From Pics generator lets you choose to create a scrolling favicon if you’d like, but be careful about using animated favicons as they can be distracting.
More Favicon Things
Mysteries Of The Favicon.ico - How To Create A Favicon In Photoshop
How to create a favicon.ico with GIMP
Delta.Tango.Bravo - lots of beautiful favicons
png2ico - Converts .png to .ico.
How To Create And Install A favicon.ico - another good tutorial.
50 Remarkable Favicons - Smashing Magazine
So what are you waiting for? Go get yourself a favicon!
