Thursday, April 16, 2009

Blogger Tips & Tricks: Grab Buttons & Favicons

***UPDATED 12/17/09 (READ ONLY text boxes)***

Welcome to my latest installment of Blogger Tips and Tricks! I decided to group Grab Buttons and Favicons into one post. Though the two aren't exactly related, they are both about promoting your blog and its look & feel (discussed in Monday's post).

Just under my profile picture in the left sidebar, I imagine some of you have noticed my grab button, which I added 2-3 weeks ago. Well, I think I actually tried to call your attention to it in a post, too. Shameless, I know. :-) I've seen several great buttons out there, and have decided to display other bloggers' buttons just above my blogroll. Everyone likes a little link love, right?! With some of these buttons, I've had to copy them myself and save them in Photobucket so that I could link them to the respective blogger's site. Others have given me code that I can copy and paste directly onto my blog with little effort--that's what I was going for when I added my grab button.


Making the button was easy for me--I created it the same way I made my header tabs that I talked about in Tuesday's post about functional headers. Many bloggers are fortunate enough to have theirs made professionally, which is even more awesome! So think about what you're looking for in a grab button. I think it's important that the button reflect the personality of you and your blog. In my case, I grabbed an image right from the header and customized it with my blog's name.

The hard part of the grab button was figuring out how to create the little text box in which I could display the code for the button. (By the way, again, you'll want to make use of a photo sharing web site, like Photobucket, for this little project.) Some of you may have wondered how I got those text boxes to show up in my post the other day. It was necessary in order to show you the code, rather than have Blogger automatically convert it into links and images, but now I'll show you how to do it!

Some of the code I showed you on Tuesday was actually for my site button, here it is again:

If I hadn't placed it within that text box, you would see my grab button, linked to this blog, within this post. In order to create a READ ONLY text box that can't be edited, place this code before the code for your grab button: . (PLEASE NOTE: You can adjust the number of rows and columns to suit the size of your sidebar area and length of your code. If you leave it with fewer rows, you'll see a scrolling bar show up. You may have to tweak the number of columns (really, characters) depending on the width of your sidebar/posting area.) At the end of the grab button code, you will use this closing HTML tag (MINUS THE EXTRA QUOTATION MARK, Blogger would not let the code display without it, darn Blogger):

So, in Blogger, add your HTML gadget, copy and paste the code for your button once (this will be the actual button display) then use a text box to display the code for your button as I explained above. There you go! Once you have your own grab button, please feel free to let me know and I will add yours to my sidebar :-)


So yeah, favicon (pronounced fave-icon) was a new word to me too--I discovered it when I wanted to create a logo to replace the Blogger logo in the address bar of browsers. Well ladies & gentlemen, that little logo you see up there is called a favicon. Who knew?!

Once you create the image you'd like to use--remember, these are tiny so it's best to keep it simple--there's a fabulous site you can use to (1) shrink it to 16px by 16px and (2) host the image for free! The site is You will then be able to get code from that site, which you will place in the header area in your blog, using "Edit HTML," under "Layout."

**UPDATE** I noticed a few days ago that the iconj site does not seem to be working, and I'm not sure if that's a permanent issue or not. Here is another option for you. This site, html-kit, will let you generate a favicon (.ico) file from a picture you have stored on your computer. Just upload the photo and then download the Favicon kit that is generated. You can then use FileDen, a free photo storage site, to store the .ico file. So where you see a link to the file in the examples that follow, you would replace that link with a link to your fileden file (which should look something like this: (END UPDATE)

That was the part where I actually had some trouble, so I hope to eliminate that for all of you reading this. *Fingers crossed.* When I first added the code, my favicon was not displaying on Safari, but I could see it on Firefox and Explorer. Well, as it turns out, there was another piece of code that solved that problem. Because I was trying to do this specifically for a Blogger site, as opposed to WordPress or whatever, it was harder to be sure I was finding usable information. Funny thing is, when I finally DID find it... the blog was written in French. Lol. It's been years... over a decade... since I had to read French. But, thankfully, I managed to figure out what I needed to do, and suddenly my favicon was visible to me in all of my browsers. Success!

The code I was given by the ICONJ web site was as follows (pretend the "<" and ">" are used at either end. Blogger is giving me trouble with posting HTML code today):

For this favicon to display in all browsers, you actually need to add one more little bit of code just after rel=' shortcut icon'.

That code is: type='image/x-icon'/

So the final code looks like this (again, missing the opening and closing "<" and ">", be sure you include that in yours. DARN Blogger.):

Copy and paste the code you are given for your favicon--remember to include that extra piece I gave you above if it's not included--in the very top header portion of the HTML code for your blog, right after the "head" tag (normally between "<" and ">", but Blogger is not letting me use some codes today, even with the text box.) Voila! Your favicon is visible to the world!

Questions? Comments? Need more help or clarification? Leave me a comment! I'm still learning all of this, but if I don't know the answer to your question, I'll definitely help you find it!

***Special thanks to an email from a reader on 12/17/09 who pointed out that my text boxes were able to be edited by others. And thanks to Google Search I found out how to fix that with this HTML Tutorial on Textarea.***

Please stay tuned for the next edition of Blogger Tips & Tricks: Useful Widgets


  1. Hey everyone, sorry for the confusion with posting the HTML code today. I hate that I can't show it the way it's supposed to work, but I kept getting HTML errors every time I tried to publish the post, even though everything looked fine as I was composing it. Hope it still makes sense!!

  2. Great info Melissa! I already knew how to make both of these, but you explain them so they're easily understandable. It's awesome!

  3. ...Also, I've added a link to your "bloggers tips" label on my links for new bloggers section. Hopefully newbies will see it and make use of your posts! :)

  4. Melissa, thank you so much!!!!!!! I have wanted to know how to post that code for my button and now I do! You rock! I will be adding your button to my site tonight along with it. Hopefully the difference between Wordpress and Blogger won't be too great.


    Jennifer @ The Literate Housewife Review

  5. Jennifer ~ You're welcome! I'll have to check out your blog and see if it worked. For something like that, I think the sites shouldn't be too different. The favicon was the thing that I knew I'd need to look at Blogger-specific info so I would know what to do... Good luck! :-)

  6. Melissa, thanks for the tips of the trade! ;) I love to dabble with HTML. (It was a required module in school; my diploma is Banking, so it's weird.) Great idea to post all these tips. I'm definitely finding them handy.

  7. In a future one of these very informative posts are you going to show us how to increase the number of hours in a day so we will actually have enough time to DO all these terrific updates?! :)

    Seriously, these have been so helpful and I have favorite placed every one of your tips to really study once school is out and I have more time to devote to blog aesthetics.

  8. Liyana ~ Glad I could help!

    Molly ~ Lol. I wish! Needless to say, I accomplished most of my own updates on the weekend, when I had the time off to do it and try to figure it all out. (And since I'm not a teacher, I don't have any work to take home with me, which does make it easier. I also don't have kids. Except my husband).

  9. Melissa, these are great tips! You've inspired me to work on my blog!!

    Now I just need to know how to insert my own background picture. I'm currently using a background from the cutest blog on the block, which I like, I just want something a little more personal.

  10. I just wanted to thank you for this post. I had always wondered how do a favicon, and now I know :) So thanks!

  11. Laza ~ I'd be willing to bet a quick search would find you something on that. That's my goal at some point, too. I'd like to design my own page down the road...

    Becky ~ You're welcome! I look forward to seeing yours!

  12. Melissa, how do you make the navigation bar at the top? With the codes and all, how to place them. I'm trying to design my own blogskin (my current one's kind of a mess) and that part's messed up.

  13. Liyana, I'll send you an email, think I know how to fix it...

  14. Melissa, thanks for the favicon thingy, mine looks awesome!! Now I feel stupid because I don't understand the button thing. Can you please explain in kindergarten-ese? Thanks! Also, did you put all the blog stat code in one html widget?


This blog does not use CAPTCHA, please comment freely! However, I have had to disable the "Anonymous" commenting feature since the spammers are just out of control. Thanks so much for taking the time to leave a comment -- I love to hear what you think! Feedback and discussion are always welcome. Happy reading :-)