Favicons

Favicons are those cute little icons that appear in your browser, to the left of the address bar. They are usually 16×16 or 32×32 pixels in size. Many websites use them as a means of branding, helping customers to recognize their website more easily. They can be generated online at many websites and then just need to be uploaded to your website, and a bit of code added to make them appear.

Here are some sites where you can generate favicons. I like the first one a lot, as it will even generate an animated favicon.

HTML-Kit Favicon Generator

Favicon Generator

Graphics Guru

Text Favicons

Once you have the favicon generated, save it to your computer as favicon.ico. Then it needs to be uploaded to the root directory of your website. Then just add the following bit of code to the <head> section of your website template, replacing YourSiteName with your domain.

(You may need to edit the quotation in the codes below to make sure they are not slanted in the wrong direction; my editor tends to make them appear in all one direction when used with HTML.)

<link rel="shortcut icon"
href="http://www.YourSiteName.com/favicon.ico"/>

And if you want to add a favicon to your Blogger blog, you can do that too. Just follow the steps below.

Upload the image to your blog or a file hosting site and retrieve its URL.

Log into Blogger and click on Layout, then click Edit HTML.

Find this code near the top: <title><data:blog.pagetitle/></title>

Paste in this code right below that Title tag (replacing YourImageLocationHere with the URL of your favicon image):

<link href="http://www.YourImageLocationHere.com/
favicon.ico" rel="shortcut icon"
type="image/vnd.microsoft.icon"/>

Click Save Template.

Note that you may need to refresh your browser and/or clean your browser’s cache in order for the new favicon to appear. Also note that if you are using a version of IE older than version 7, you will need to add your site to your favorites to get the favicon to appear. And hey, if you’re not using IE8, why not upgrade?!