Wednesday, September 16, 2009

Easy favicons ready to use


A Favicon (short for FAVorite iCON) is a little image displayed in the browser address bar and tabs or in bookmarks, like this in the address bar of this webpage above.

The very first step to installing a favicon is the creation of the image to use for the favicon which if you trying to create in the small size allowed for favicons, is no easy task (unless you use an existing photo and shrink it to size like mine )

To cut the hassles, Favicons4free have created a huge library of ready to use favicons together with the codes you need to install them. Just click on one of the categories (examples - animals, flags, birds, etc.) and in the new page, copy the single line of code next to the favicon you want,

favicon and HTML code
then go to the template editor and paste the code just after ]]></b:skin> and just before </head>, preview and if everything looks all right, save template. (span style="color:red;">

Note that the codes given by Favicon4free is not compatible with XHTML which requires ALL HTML tags to be closed. For example, the given code is

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico">


You will have to add a matching closing tag </link> at the end of the code so that it become

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico"></link>

or alternatively edit the tag to include a backslash / to make the tag self-closing, like this:

<link rel="shortcut icon" href="http://www.Favicons4Free.com/icons/flags/malaysia.ico" />
(note the space in front of the backslash / and the (red) backslash itself just before the last "greater than" symbol.

This was tested on a blog Guide to Malaysia for which the country's flag was selected for the favicon.

8 comments:

  1. Can you confirm that favicons will not work with Blogger sites that have a domain redirect? I tried endlessly, and could not get the favicon to display on the site homepage, because GoDaddy does not allow it for some reason. It only displays correctly on secondary pages of the site, as long as they are a .blogspot.com url.

    Thanks!

    ReplyDelete
  2. Thanks Peter.. I added icons to my blog. Looks good in Firefox.. wonder why they don't work in IE?

    ReplyDelete
  3. I will do some research when I have the time.

    ReplyDelete
  4. thnx for the tip, I love my new favicon :)

    ReplyDelete
  5. Just thought you might want to know that the code examples you're giving in this post aren't showing up correctly... although your instructions wjavascript:void(0)ork great :o)

    ReplyDelete
  6. Thanks Grgg, will look into it later.

    ReplyDelete
  7. hi peter, is not working.will the fabicon work in several domain?

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics