Add Favicon To Blogger

A favicon (short for 'favorites icon'), also known as a website icon, a page icon or an urlicon, is an icon associated with a particular website or webpage. A web designer can create such an icon, and many recent web browsers can then make use of them. Browsers that support favicons may display them in the browser's URL bar, next to the site's name in lists of bookmarks, and next to the page's title in a tabbed document interface.

The original means of defining a favicon was by placing a file called favicon.ico in the root directory of a webserver. This would then automatically be used in Internet Explorer's favorites (bookmarks) display. Later, however, a more flexible system was created, using (X)HTML to indicate the location of an icon for any given page. This is achieved by adding two link elements in the section of the document as detailed below. In this way, any appropriately sized (16×16 pixels or larger) image can be used, and although many still use the ICO format, other browsers now also support the animated GIF and PNG image formats.

Most modern browsers implement both methods. Because of this, web servers receive many requests for the file "favicon.ico" even if it doesn't exist. This may annoy web server administrators by creating many server log entries, and unnecessarily loading the disk, CPU, and network. Another common problem is that the favicons may disappear if the browser's cache is emptied.

Originally, Internet Explorer only used favicons for bookmarks, which created a minor privacy concern in that a site owner could tell how many people had bookmarked their site by checking the access logs to see how many people downloaded the favicon.ico file. However, since newer versions of Internet Explorer and most other browsers also display the favicon in the address bar on every visit, that concern may no longer be relevant.

First you need to create a neat favicon from this site : http://tools.dynamicdrive.com/favicon/

After you've created a neat favicon, it's time to add it to your site. To do so, follow the below simple procedure:

Upload the generated file ("favicon.ico") to your site. Verify it's there by typing http://mysite.com/favicon.ico in the browser's location, where "mysite.com" is your site's address.

Next, insert the below code in the HEAD section of your pages, at the very least, your site's main index page:



<link rel="shortcut icon" href="/favicon.ico" />


example of complete coding:


<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<link rel="shortcut icon" href="/favicon.ico" />
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: K2
URL: http://www.geckandfly.com
Updated by: http://www.blogcrowds.com
Support: http://www.blogcrowds.com
----------------------------------------------- */


That's it! Note that your favicon may not appear immediately after you've completed the above two steps. In fact, it may take a few days, and in IE, sometimes the favicon will disappear from time to time due to a browser bug.

 

8 comments:

Daniel said... July 10, 2007 at 1:33 AM  

this blog is very useful thx 4 the time ;)

xtreme_paranoid said... July 10, 2007 at 2:39 AM  

thanks for would comment my blog..
thanks again..

Al-Fa'izun said... February 4, 2008 at 6:25 PM  

Nape x leh wat... kluar error cam nie pulak... pening btul bile nok wat mende nie... plez help me...

Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "link" must be terminated by the matching end-tag "".

xtreme_paranoid said... March 15, 2008 at 1:42 AM  

Al-Fa'izun..

ader link yg ko x betul tutup tuh.
try tgk btl2.

Anonymous said... May 19, 2009 at 4:21 AM  
This comment has been removed by the author.
Anonymous said... May 19, 2009 at 4:23 AM  

may i ask something? don't know where to put my question, so i post here...

may i know how to create a page in blog?just like in wordpress?

thnks in advance~~

synical said... July 10, 2010 at 7:52 PM  

Thanks for this!

Zahid Bin Abdur Rouf said... February 11, 2011 at 12:09 PM  

Thanks for sharing the trick. But i dont see any change in your blog's favicon ? its the same blogger blog icon. My question is , why didnt you changed your own blog's icon ?

Post a Comment