Favicons are those little icons associated to a site that shows on a browser’s bookmarks, address bar, etc. If you want to give your site some sort of brand recall, having a Favicon associated with it is the way to go.
You’ve probably noticed my Favicon that I made a few days ago. It’s quite easy to do as long as you can edit the code on your pages. Sorry WordPress.com users, you’re stuck with the WordPress logo as your Favicon.
Here’s a short guide on how to have your own Favicon.
Design your icon
First you have to design your own icon using your favorite graphics application. It doesn’t have to be flashy. Actually, the simpler the better and use less, but vivid colors.
The size of a Favicon is 16 x 16 but I suggest designing it on 64 x 64 first. Here’s what I did on Fireworks with a font called Bummer and a transparent background for my rounded square icon. You could use a small scale version of your own logo if you have one.
Resize it down to 16 x 16 to check if it still looks good. When you’re happy with it, bring it back up to 64 x 64 and save it as PNG, BMP or GIF even.
Convert it to an icon file
Got your image? You need to convert it to a .ico file. Head to Bradicon which is one of the many online services that converts images to icons. Just upload your image and download the icon in seconds.
You should see how it will look like on browsers by going to the folder where you saved it. It is important you rename it to favicon.ico.
Upload your icon
So you got your icon file now. Next step would be to upload it somewhere. It could be on your own site, some image hosting service that accepts .ico files like PicPanda, as long as it can be accessed directly by the public. Take note of the location of the file.
Adding the code
It’s quite simple really. On all your pages or if you have access to the code of your template, put this piece of code below the <title> tag along with the other <link rel> tags.
<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon” />
For WordPress users, the page to edit is the header.php on your theme’s folder. For Bloggers, just look for the Edit HTML page and place it after the <title> tag.
If the your icon is not located on the root directory of your site, change href accordingly (it could accept http URL’s).
When you’re done, restart your browser before opening your site again. You should see your Favicon by then.