Next Blog Design Tip...How To Add a Favicon to Blogger!

'We're back!

Thanks so much for joining me on this series of 10 Ways to Beautify Your Blog.  So far, we have learned a few basic things such as...

1.  Find a layout you love
2. How to post LARGE pictures on your blog
3.  How to make your NAVBAR disappear, and
4.  How to make photo collages by Steph

My next tip is one of my favorites.  It is...How to add a FAVICON to a blogger blog!  It's really not too difficult and is a fun way to personalize a blog or website.  I've learned this pretty much by trial and error, so if you have any extra tips or simpler ways to do this, please let me know. 

What is a favicon, you ask?  It's the words "favorites icon" shortened into one word.  It's the little symbol that you see to the left of the address bar; blogger blogs come with an orange "B."  For instance, last night I added a pink heart as my favicon. 

Here are the three steps to add a favicon to your blog.
 1.  Create a favicon
2.  Upload it to an image host
3.  Edit the Blogger Html to add your personal favicon

Create a Favicon
Create a picture, symbol, or letter that is 16x16 pixels and save to your computer as a .png or .gif document.  You can use fonts, clip art, photos, anything.  A photo-editing program, or even a simple Paint program, should do the trick.  There are also favicon-generating websites you can use that will give you a favicon already made (Favicons R Us, FreeFavicon.com, etc.).  These sites will give you the icon as a .ico file that works as well.

Here's what my favicon looks like.  Besides shapes or symbols, you can do a monogram or the letter of your last name. 

Upload
The next step is to simply upload the file to an image hosting site (picasa, flickr, etc.).  After uploading, you need the photo's url address.  If you uploaded a premade .ico file, you may need to find another image hosting site that can support that type of file (try HostAnyImage). 

Edit Your Blog's Html
This step has to be done just right.  Go to Layout>Edit Html in Blogger.  Look for  /head (with the arrows around it).  An easy way to search is to go to Edit, then Find, and you can type the word you are looking for and it will highlight it automatically on the page.  Next, you will paste the following code right before the /head section.

<link href='YOUR-FAVICON-URL' rel='shortcut icon'/> <link href='YOUR-FAVICON-URL' rel='icon'/>

You will substitute your photo's url (should end in .gif or .png) for YOUR-FAVICON-URL.  Preview and then save!

I hope this helps!  Let me know if you have any comments or questions.  Share and enjoy!  Let me know how it works!



And stay tuned to learn how to make one of these. 

P.S. We are having some friends stay with us this weekend and I am needing some good dessert recipes.  Any ideas???