tiny victories

And I mean lit­tle


 I’m talk­ing about a fav­i­con, which is the tiny icon that appears in address bar of your brow ser and tabs (if you’re using a browser with tabs). Nor­mally with blogs on Blogspot, you see a lit­tle,









You will notice in the address bar for this blog, there should be a small M (for Matthew, of course). I said “should be” because I noticed the fav­i­con comes-and-goes on the Fire­fox browser.

Though the fav­i­con is not really a big deal (no pun intended), I think it’s a nice lit­tle way to indi­vid­u­al­ize and brand your blog or website. 
It took a few trial and error attempts to fig­ure it out on my sites and WordPress-powered blog. Even though I know how to add the fav­i­con, it took a few attempts to make it work on Blogspot.
I fig­ured that I would share with you the steps I fol­lowed to save you the headache — for the most part. If you’re inter­ested in adding a fav­i­con to your blog, here is the steps you should follow. 

1) Cre­ate Your Own Fav­i­con
When cre­at­ing your own unique fav­i­con file, remem­ber that it is a very small icon file. My rec­om­men­da­tion is to keep it sim­ple. Many logos get lost when you shrink them down. 
It’s worth not­ing that the fav­i­con will have ‘.ico’ exten­sion. (I’ll explain why this impor­tant in the next step.)  If you have edit­ing soft­ware, reduce your desired image to 16x16 pix­els. Huh? What? Don’t worry if this doesn’t make sense, or seems like a has­sle. You can use one of the fol­low­ing online ser­vices to cre­ate your fav­i­con for free. 

With many of these sites, you upload an image or draw your own fav­i­con. The image is pretty small, so crude draw­ings really don’t mat­ter. I’d stick with let­ters or sym­bols if you’re going to draw.


2) Upload Your Fav­i­con File
Now that you have cre­ated your fav­i­con, you will need to upload it to a web loca­tion. As I alluded to ear­lier, the fav­i­con file is a small image file with ‘.ico’ exten­sion. The issue with this exten­sion is that it can­not be uploaded to many photo shar­ing sites such as Pho­to­bucket, Picasa or Flickr.

I did some check­ing, and the image host­ing site Pic­Panda accepts .ico exten­sions. Once you’ve uploaded your fav­i­con, it’s impor­tant to copy the link to that image. I typ­i­cally keep the image open in a sep­a­rate tab, because I often have to cut-and-paste other text before get­ting to the link.

3) Add the Fav­i­con to Your  Blog
Once you’ve uploaded the fav­i­con to a domain or image host, you will need to con­fig­ure your blog to dis­play it. To do this, you will need to go into your Blog­ger profile.

     Go to layout 
     Click ‘Edit HTML’

Before doing any­thing else, it’s a good idea to down­load your full tem­plate before mak­ing   any changes to the code.


You will now be look­ing at the HTML code for your blog. Though it may feel like look­ing into the Matrix, locat­ing the proper place to add code to show your fav­i­con is not too difficult. 
What you’ll need to do is first locate the proper place to insert new code — just  after the blog’s title tag. To do this, search for the following,
=“font-family: Arial, Hel­vetica, sans-serif;”>Once you have searched and located this bit of code, put your cur­sor at the end of that line and press enter. On the next line, insert the fol­low­ing line of code. (Note: you can’t copy the code from this page because the words are actu­ally an image file. The short answer to “Why?” is because I can’t post live HTML code within my posts.)

Make sure you replace the words your fav­i­con url with the the address of your fav­i­con file. Be sure to keep the sin­gle quote hash on both sides of the link.
Save the template. That's it!  and check your blog. Your favicon should now be visible. I hope this was helpful.

November 28, 2009 – 8:37 pm | By matthew | Posted in business | Tagged , , | Comments (1)
  • miss k

    we need to cel­e­brate all our vic­to­ries my friend — big or small — so kudos to you!