What is a Favicon?
A favicon (short for "favorites icon" and also known as a page icon), is an icon associated with a particular website or webpage that is displayed in the browser address bar next to a site's URL.
Favicon Screenshot
You would first need to have an icon which you would like to use, bearing the extension .ico format. If you search your hard disk, you might find some icons which are generic. I would suggest that you create one to represent your own unique identity. There are quite a number of free icon editor software which you can download from the net.
If you do not wish to download any software, you may also try creating an icon online.
Step 1. Visit HTML Kit - Online Favicon Maker to make your own favicon from your desired image.
Step 2. Download it and rename the custom favicon as you want.
Step 3. Open MS Paint in your computer and change format ICO. to PNG or GIF format and save.
Step 4. Then upload somewhere (i use http://imageshack.us/ for this ). Remember to save the link / url of your uploaded favicon.
Step 5. Go to your Blogger Dashboard > Layout > Edit HTML.
Find the title tag which looks like this:-
<head>
Step 6. Copy and paste the following code (right after above script)
for ICO. format
<link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
for PNG. format
<link href='URL of your icon file' rel='shortcut icon' type='image/png'/>
for GIF. format
<link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>
Remember to type in the “URL of your icon file”, Then Save Template.
That's all there is to it, enjoy your favicon! Enjoy your new favicon look!
Other online favicon generator
http://tools.dynamicdrive.com/favicon/
http://www.favicongenerator.com/
http://www.chami.com/html-kit/services/favicon/
http://www.favicon.co.uk/
http://www.favicon.com/
Compatibility
While you can see the Favicon in Mozilla Firefox, many have problems seeing the Favicon in Internet Explorer. This is a known problem and has been a sore point with many IE users. In some versions of IE, bookmarking the site will display the Favicon. This is not necessarily so in IE7 that we are using. In fact, when we bookmarked the highly popular search engine sites, their Favicons don't show in our IE bookmarks too although they show well in Firefox. Perhaps this is one more reason to download Mozilla Firefox if you have not already done so.
Related articles :
Comments
14 comments to "How To Change Blogger Favicon"
October 13, 2008 at 9:08 PM
But the problem is that whenever it is viewed in IE, the blogger favicon still appears...
November 7, 2008 at 5:33 AM
doesn;t work for me, usin Firefox
November 7, 2008 at 10:37 PM
<head>
<link href='http://www.fileden.com/files/2008/9/28/2119251/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Try this, your icon must be in .ico format. Go to http://www.fileden.com to upload your .ico image
November 13, 2008 at 10:24 PM
blogger-godown.blogspot.com
December 22, 2008 at 3:06 AM
I tried it and got:
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 reference to entity "auth" must end with the ';' delimiter.
January 3, 2009 at 6:18 PM
ive tried..but my favicon only appear for a split second..and gone after that..pls help me>im using mozzila
January 3, 2009 at 10:15 PM
Go to http://www.fileden.com to upload your .ico image SWEETALIA
January 3, 2009 at 11:06 PM
I uploaded my .ico file at fileden and pasted the .ico link ref from above, but i still see the blogger icon. Did you get this to work?
January 3, 2009 at 11:41 PM
Yes i did, see my icon above. It's a custom icon.
Go to your template and find the HEAD section.
Paste this code below your HEAD section.
<link href='YOUR FILEDEN IMAGE URL' rel='shortcut icon' type='image/x-icon'/>
Example :
<head>
<link href='YOUR FILEDEN IMAGE URL' rel='shortcut icon' type='image/x-icon'/>
I hope this helps.
January 4, 2009 at 3:53 AM
The reason Djyano's code does not work is because Djyano has disabled the following line which is present by default:
(b:include data='blog' name='all-head-content'/)
Where the parentheses are actually lessthan/greaterthan signs.
That line generates a conflicting favicon code which cancels out Djyano's.
I got it to work on my blog by commenting out that line and pasting in the stuff it generated, minus the favicon, manually. To see what it generates, you need to "view source" on your blog. There's probably an easier way, but now you know why Djyano's trick failed.
January 4, 2009 at 2:33 PM
Yes Glowing Face Man,
Find that line and remove it. I don't include that because im using a custom made template.
July 3, 2009 at 7:42 AM
Thanks...it work for me
Regards,
Blogger Magazine Templates
January 21, 2010 at 3:40 AM
Thank so much
Shiv Singh
Watch My Site At:
=============================
wwww.srapsblog.blogspot.com
=============================
Free Pc/Mobile Software That , you can download from Midiafire .
March 26, 2010 at 9:45 AM
I've been looking so hard for this and so glad that I found your website. Thank you sooooo much!
It works!
Post a Comment