Thursday, May 5, 2011

How to make a favicon (the little icon by your url)

Hiya everyone!
I'm kind of on a blogger tip streak. Why not huh?

I didn't know what this was called until I did some research but the little orange B next to our blogspot urls is called a favicon. You can personalize it by making your own as well! It helps viewers remember your shop by image better and it's a nice professional touch away from the typical blogspot "B". Here's how you make your own.

Favicons are very small so when you make your image (16x16), make sure it is simple and straight forward. You don't want anything very detailed being squished into a jumble of mini pixels. I've seen solid images like a capital letter, heart, star, etc...do best. Mine is a little string bow that I made on paint.

Now I don't use anything fancy program wise so I went ahead and made my image on paint and saved it as a png. file. Then, I uploaded it to a image-hosting website-- such as flickr or photobucket for a free direct url link. Once you have a url for your soon-to-be favicon, you're basically done.

Go to the design page, press "edit html" and scroll down just a little to find:

Right after this line, you want to paste:
<link href='YOUR FAVICON URL HERE' rel='shortcut icon' type='image/x-icon'/>

And when I say url, I mean the direct one like www.yourblogname.com. I noticed other sites complicated this with favicon generators and programs when it's not meant to scare you away. It's very basic code adjustments so don't worry-- you can handle it if I can!

And that's it. Save and it should show up (maybe not right away) next to your new and improved url.

Write any questions or comments below in the comment box. Hopefully, if any problems arise, we can help each other out!
Photobucket Photobucket


  1. I recently discovered how to do this and I was thrilled! Your little bow is wonderful.

  2. I feel like a dingle brain... I can't find the bow. How am I missing it?

  3. Thanks for that, now I have got to go and try and make one:):)

  4. Katie, depending on the browser you use, it soemtimes doesn't show up. I'm currently using explorer and next to my url is their "e" ad per logo. On firefox, it usually shows up. It's a ltle blue bow-- you'll see it next time maybe? :) I can't wait to see everone's favicons!


All thoughtful comments are appreciated. :) Thanks for being here!

Blog Design by Caked Designs