Odd thoughts, quirky ramblings, random pictures, and the latest in quirky finds from across the web, QJ has a little something for everyone.

View Blogger Profile

I'm posting mostly over at Quirky Cookery right now, where I play with my food and teach you to have fun with it, too. Come check me out?

How to Change Your Favicon in Blogger

I meant to get this changed for my blog quite a while back and never got around to it. My blog got lost in my tabs of blogger blogs for the last time, and now I (and anyone else who has a thing for tabs) can quickly see who's site it is at a glance. That likely seems silly to most of you, but I happen to love favicons and am glad mine is finally changed.

Fortunately for me, when I remembered to look for quick directions and went for it, I stumbled across this site first thing and found a somewhat simple way to get it done. There's a lot of extra stuff in there that you don't necessarily need to know, but because I used her as a reference, I wanted to give her credit for it, too. Basically, grab her link for MyFavatar, follow the registration and upload instructions, and paste the code directly into your layout HTML where the site tells you to. It took less than 5 minutes because I already had my quirky icon and simply needed to upload, insert, and voila. :D

~Edit on March 18, 2008~ MyFavatar has been down for about a week or so now, which means everyone who had their favicons linked directly through them, no longer have their favicons showing, which is really sad. I checked and the site doesn't appear to have any issues with not renewing its hosting package, but who knows? Anywho, times are starting to change and many browsers now recognize formats other than the .ico, which was the biggest complication in the first place.

Here's how I corrected the issue. I used a photo editing program (paint, photoshop, etc) to create a 16 x 16 image. I then uploaded it to Photobucket (use whatever you're most used to). From there, I opened up my blog's template/html code and did a search for "favatar" to find where the old coding/url was in my template. I then simply replaced the two url/web addresses that were previously listed.....added in the new file location instead and I'm all set again. :)

~Edit October 30, 2008~ Something was changed and there seems to be an issue with some FF users where they won't see the favicon if it's place in at the top of the template. I don't like deleting old entries, so I just crossed out the old info. Here's all you need to know now:

  • Create a 16x16 image.
  • Upload it to somewhere like Photobucket or Flickr.
  • Copy and paste this piece of code right before the tag in your template:

    < href="yourimagefilehere.jpg" rel="'shortcut" type="'image/x-icon'/">

  • Take out the space after the after <, replace the "yourimagefilehere.jpg" with the url of where you hosted your image, and save. That's all there is to it.

frankufotos Lingerie said...


Thank you for finding this! I'd looked at some similar sites that weren't nearly as easy to use as this one.

Related Posts with Thumbnails
Clicky Web Analytics