3.20.2008

How To Change Blogger Favicon

14 comments

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

Favicon Screenshot

The question now is how to customize it? This time i will share you a tutorial to customize your own favicon. So, here we go...

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.Digg my article

Related articles :

  • Top 10 Blogger Hacks and Tips
  • Creating Expandable Post
  • Add Digg button
  • Add Language Translation
  • 10 Questions Every Blogger
  • Hide Navigation Bar
  • Convince People To Comment
  • Put Clock In Your Blog
  • Change Post Date To Calender Icon
  • Add Social Bookmark Icons
  • How to Create a “What’s Next?” After Every Post In Blogger


    Comments

    14 comments to "How To Change Blogger Favicon"

    Xavier Lur said...
    October 13, 2008 at 9:08 PM

    But the problem is that whenever it is viewed in IE, the blogger favicon still appears...

    Anonymous said...
    November 7, 2008 at 5:33 AM

    doesn;t work for me, usin Firefox

    DJYano said...
    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

    Rajesh N Butpur said...
    November 13, 2008 at 10:24 PM

    blogger-godown.blogspot.com

    DrK said...
    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.

    SWEETALIA said...
    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

    DJYano said...
    January 3, 2009 at 10:15 PM

    Go to http://www.fileden.com to upload your .ico image SWEETALIA

    Christopher Byrd said...
    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?

    DJYano said...
    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.

    Glowing Face Man said...
    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.

    DJYano said...
    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.

    DRSP said...
    July 3, 2009 at 7:42 AM

    Thanks...it work for me

    Regards,

    Blogger Magazine Templates

    shiv said...
    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 .

    Travel said...
    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