August 20, 2007

The Magic Of Favicons



Have you ever visited a blog or a website and seen a tiny image in the web address bar? Have you ever wondered how-in-the-world folks did that? Well if you did I am here to tell you that you too can have your very own... Favicon icon. Yes, that is what those little images in the address bars are called.

And to help make things a little easier I will share in this post where I went and what I did to accomplish the making and publishing of a favicon icon.


Step one. First, I thought about what image I wanted to use as my favicon. You can make one in Photoshop, or you can use photos.

Step two. Once I figured out what I would use my next step was to turn my image into an .ico file. For this I found Favicon from Pics. Go visit this site. Its quick, its free, and most importantly... it works!

Step three. Now here is where things got tricky. Why? Because Blogger will not let you just type in your favicon icon into the html. You have to upload your favicon somewhere online first. That was my biggest problem. Where could I go to upload when most places online don't allow .ico files?
Well, I finally found a solution when I visited a great blog called, " Tips for New Bloggers." I did a search in this blog for Favicon icon and found what I was missing! It was suggested that folks find a free host like Google Page Creator. This was also free. So I uploaded my favicon into my own space in Google and found the url address for my little .ico file. Now I was in business!

Step four. Once the uploading was complete I revised my blog's html. Basically, I went to the top of my html code and looked under this:
< head >
Next I found this: < title>< data:blog.pageTitle/>< /title>


It was the second " sentence" down from the < head> opening tag.

Then I typed in the following: < link href='http://MY ADDRESS/MY FAVICON ICON FILE' rel='shortcut icon'/> And that was it!

Of course the final html code I wrote above is just an example. If you type it in your html put your own web file address instead of MY ADDRESS and exchange MY FAVICON FILE for the url address of your icon. But if you're still a little confused do visit Tips For New Bloggers. They do a great job of detailing the steps.


13 comments:

Thomas said...

I did not know this! Wow!

Anonymous said...

Actually I never noticed the icons in the address bar before until you mentioned it and I saw yours ;)Thanks. I hope to fool with this a little when the weekend gets here. First week of classes are always overwhelming. Hope you don't mind if I link this in one of my posts?? I always use www.photobucket.com to host images...it's very easy to use also.

Thanks for stopping by to say hello. Good luck with your syllabus. Staff services left one page out of all of mine when they printed them...found this out five minutes before classes yesterday ;(

What will you be teaching?

Sincerity said...

thomas:

Now... you know.;) And Welcome! Come by again, won't you?

danielle b.:

I'm glad I could introduce you to the favicon! :) I don't mind if you link to this post. Does photobucket allow folks to save .ico files? If so, let me know.

I'll be teaching piano, viola, and string ensemble classes. Whew! Just thinking about it is getting me all excited... and bit nervous! :)

Anonymous said...

Okay...I am going to try and figure this out so my photo will show up in my address bar...if I have any problems...I'll be back for more instructions ;)BTW...I'm going onto photobucket next so I will check about the .ico (whatever they are ;))...files and let you know ;)

Anonymous said...

Yea!!!! I did it!! Actually, I didn't even have to change it to a .ico file..it did it as a jpg on photobucket. I may get a clearer picture up there...but for now it's great...thanks!! Will definitely put this on my tips for Thursday post tomorrow!!!

Sincerity said...

danielle b.:

Wow! Cool! Thanks for the tip and I'm glad its working well for you!

mitzh said...

oh wow! I'm going to try this one on the coming days when I'm not busy or my insomnia is on active mode.

it's really a great tip.

Thanks!

Sincerity said...

mitzh:

Your welcome! Good luck!

mitzh said...

I did it!
Thank you, thank you so much...

g said...

Mitzh directed me here. (She was, naturally, raving about her favicon.):D

Amazing post! Thanks for the helpful tips, and the awesome links!

g said...

I've done it! Unfortunately, when I use IE, I don't see favicons on anyone's Blogger blog.

Even on this guy's.

Tough luck. But it's on Firefox. Cool.

Thanks a million! :D

Sincerity said...

mitzh:

Congratulations!

g:

Welcome! That's awesome! I'm so glad folks are finding this post helpful!

izitjo said...

I'll have a go at this one day... but more than anything I'd like to know how you do that "read more" & "summary" thing!!? :)

Nice to find another single gal around by the way :)