How to add a Favicon to Blogger Blogs

Add Custom Favicon To Blogger
Blogger blogs have a default Blogger favicon and this is to show that the blog is using blogger platform.
But some blogger users want to brand their websites by adding their own custom logos and favicon.

In this post i will explain to you how you can add a favicon to your blogger blog and how simple it is.

What exactly is a Favicon?

A favicon stands for favorites icon, also known as a website icon, shortcut icon, url icon, or bookmark icon. It is a 16×16 pixel square icon associated with a particular website or webpage. Browsers that provide favicon support typically display a page’s favicon in the browser’s Address bar and next to the page’s name in a list of bookmarks.

Usually favicon has the extension .ico but Mozilla Firefox browser has added further support for favicons. So your favicons can have either of the following extensions .ico .png or .gif.

In order to add your favicon you should follow these steps:

Step I : Creating your own favicon

Favicons can be created by Image Manipulation softwares such as Photoshop and Gimp and just by selecting the dimensions to be 16 x 16.

For those who don’t have any knowledge about these softwares can convert their images to favicons by using these free services:

Favicongenerator.com
favicon.cc
Online fav-icon creator
FavIcon Generator
FavIcon from Pics
Genfavicon

Alternatively you can select a favicon from the image galleries provided by the following sites:

20 Free Favicon Icon Sets
free favicon
Favicons R Us
Free Favicons

You can upload your favicon on blogger by uploading it on any post and retrieving the link of the image or you can directly upload it on your picasa web albums.

Another option is to upload the image on google sites. Uploading on these websites is beneficial because they are hosted by google and therefore are more reliable.

Step II: Adding the image link to your blogger template

1. Go to Layout->Edit Html
2. Download Full Template (This is to backup your template)
3. Check the Expand Widget Templates
4. Search for the following code

</head>

5. Just above the code place the following code:

<link href=’Favicon-image-url‘ rel=’shortcut icon’/>
<link href=’Favicon-image-url‘ rel=’icon’/>


#Update
The above code was not working on internet explorer and google chrome. So i have updated the code. The new code will work on all the three major browsers.

Updated Code:

<link href=’Your-Favicon-Image-Url’ rel=’shortcut icon’ type=’image/vnd.microsoft.icon’/>

6. Replace Favicon-Image-Url by the link of the image.
7. Save the Template and you’re done.

Facing problems. Tell me!!

  • Tanuj Lakhina

    Am not really sure if you can host the *.ico file on any image hosting site.I've not tried on Picasa but some other hosts I did try when trying to create my own favicon and I ended up using Fileden.com , works there. Although you have to login there every month to keep your account working and files to stay.Mine was recently deleted.

  • gautam

    You can try google sites : sites.google.com it is reliable and from google

  • iWrite2Know

    WOW! Favicon should be a great way to brand a blog

  • Tanuj Lakhina

    Oh think thats a better option than crappy fileden!

  • Ankur Patel

    ThanX for accepting request πŸ™‚

    but it works onlyy in firefox….safari, opera, ie, chrome dosnt work…any solution?

    and besides that i have one more confusion…check this screenshot and help me to figure out, http://k88.sl.pt

    in what area do i need to change pixel number in order to expan width of body?

    hope to hear from u soon…and thanx in advance πŸ˜‰

  • Tycoon Blogger

    Your favicon look really good. This is something I have to get around to doing for my blog. On a side note, I tagged you on my blog for a "blogger chain" Take a look when you get a chance..

  • gautam

    @Ankur Patel
    Use .ico format for favicon it works everywhere(it is a standard).
    And about your template. It might be probably the main wrapper but you can experiment yourself

  • Ankur Patel

    @gautam

    no, it works only in firefox even we use .ico format

    evenfor your site favicon works only in firefox. i check your site in opera and safari, it saws blogger icon not bloggodown.com icon

  • gautam

    @Ankur Patel: i am having no problems with it. it is working on internet explorer and firefox

  • dhurianne

    Thanks so much for this. I have now because of this share. U can check mine too.

  • Jason

    This really helped. Thanks,

  • Nerdote

    whats up!? hey thanks 4 the tutorial!!

    But my favicon is acting all weird. My blog is http://www.arrozconpinga.blogspot.com and i can see it there if i'm using internet explorer, but not if i'm on firefox. Weird. any help??

    Also, even on internet explorer, if i access my blog through http://www.arrozconpinga.com (recently purchased the domain on godaddy and i redirected it), i do not see the favicon.

    Any ideas, suggestions, questions??

    Thanks.

  • Nerdote

    hey just made the update you suggested. Same problem.

    Thanks

    &

    sorry!

  • Ankur Patel

    ThanX for update πŸ™‚

    it works for me in Firefox, Internet Expoler & in Google Chrome

    it still doesn't work on Opera & Safari

    but still thanx for sharing πŸ™‚

  • gautam

    @Ankur patel will see if it can fixed for Opera and Safari

  • Mary, Author and Publisher

    This doesn't work for me. Could you help?

  • gautam

    @Mary: could you cite the problem you are having, i would like to know what type of problem are you facing.

  • The Persimmon Perch

    Thanks it worked great!

  • Mysticle

    I've just noticed that the favicons on all of my sites are not working. This must have occurred in the last few days. I created the favicon and hosted on Ripway. I have the code incorporated into the template. Has been working fine, until recently. Any ideas?

    I use Firefox, always. Did an update a several days ago. Could that be the issue?

    Multiple sites: 2 different favicons

    http://mysticle.blogspot.com/

    http://rickbischoff.blogspot.com/

    Thanks!

    Recent blog:=- Water and Consciousness

  • gautam

    Possible reasons maybe:
    1. your hosted image is not showing because of ripway
    2. you have removed the code of favicon

    There may be many reasons but in my opinion first host the image in say sites.google.com

    Recent blog:=- 36 Quality Tweeps to Follow

  • Tim

    I had so many problems trying to get my favicon to show up in Blogspot using Chrome. Until that is I found your page. Phew! You've saved me a huge headache.
    Thanks very much for you work.

  • I got onebut its kinda blurred
    .-= Sushant @ techooze´s last blog ..Audi Avatar, Another Audi Concept Supercar =-.

  • Thanks for type=’image/vnd.microsoft.icon’/>
    .-= Valdazzar´s last blog ..Finding Nemo – Various sizes =-.

  • This favicon don’t work in IE 8 only in Firefox.

  • Hi! Thanks for your post! Formerly i used the code without ‘type’ option. No wonder the favicon didnt work with Chrome until i found your post! Thanks~

  • Pingback: QUESTION EVERYONE: Regarding Favicon; Please PLEASE help :)()

  • rndtechnologies786

    Good think.