Reflection's Got a Favicon, You Can Have One Too, Tuesday's Tip

Copyright 2011, CABS for Reflections From the Fence

So, what is a favicon?  Well, it is the little icon that preceeds the site name on the browser tab.  Say what??

Here is a screen capture of a few of my Chrome tabs, from the left:

Blue "R".  Click on it, Reflections From the Fence blog will open

Purple "R".  Click on it, Reflection's Flora and Fauna blog will open

World.  Click on it and North Carolina archives pages with some great digitized records would open.

Inbox (9) lashb.  That is my Google email.

Reflections 2011.  Click on that and it will take you to one of my albums in Picasa (online).

Favicons also show up on neat things like the blog lists many of us have on our blogs.  For example, here is screen shot of part of cousin Anne's Gene Notes blog:

Geneabloggers, see the favicon, it is a very small version of their famous badge.  Every Geneablogger knows that hand with a writing instrument.

Next, is Reflections with my new blue "R" favicon.

And,  there is cousin Karen, from Genealogy Frame of Mind, with the Blogger favicon, the orange and white "B".





So, a favicon gives you a distinct icon, something that over time will become recognizable as a trade mark of sorts.

Blogger friend Susan Clark from Nolichucky Roots added a favicon a while back and I have been looking at hers, thinking, Carol wants one of those.  I started snooping around in blogger help and dropped Susan a email.  She shared what she had to do to get her favicon.  It was a bit difficult, even Susan admits that.

I kept snooping, and experimenting, and I finally got my own favicon, and this is how I did it!

1.)  Choose the icon design you want.  I have even seen bloggers profile photos used as their favicon.  Later I'll give ya a few hints on how I made mine.

2.)  Open up the "Design" feature in the old Blogger and the "Layout" feature in the new Blogger.  Look for a "Favicon" widget thingy, it is near the top and on the left.  Here is what it looks like in the old Blogger on my Reflections design page:

3.)  Click on that "Edit" button, and this is what you will see (you will not see my blue "R"):

4.)  Click on "Choose File", browse around on your computer's hard drive for the icon you have chosen and previously had saved.  Do all the "open or save" clicks required and you should see your favicon where you see my Blue "R" in the graphic above.

Things to note:  You need a browser that is Java enhanced.  Currently my version of Chrome is not, so, I have to use IE9 to accomplish this.  Your icon needs to be square and no more than 100 X 100 pixels.  Mine is 66 X 66.  Your icon can be in the jpg format.  There may be other formats that are acceptable, but, why bother, when the jpg works.  Your favicon may not show up on your browser for a bit - trick - clear the history via the tools for your browser.  But, even then, it may not show up immediately.  If you see the favicon on the "design" or "layout" page, it will eventually show up all over the net!  Relax and wait it out.  One of mine refused to show up for about 24 hours, I did nothing but wait.

Now, here is sorta how I made my favicon, simple with a bit of luck.

1.)  Simple:  Opened my word processor, chose a font, funny, I cannot tell you what font I chose, I sorta skimmed down a bit in my list of fonts and chose one, just that fast.  Next I typed in my "R".  Chose a color, I actually started with red, tried a purple, and then a blue.  Chose a font size, if I remember it was something like 64.  Ya, big!

2.)  A bit of luck:  Copy and then pasted into my photo editing program.  Cropped, sharpened, and resized to 66 X 66 pixels and a resolution of 72.  I had to do this a couple of times till I got the icon the way I wanted it, and I had to redo this exercise for each color of icon.  I am sure there are better methods of accomplishing this, but, these steps did work.  LOL

There ya have it, how you can have your own custom favicon. Have fun creating your very own trademark.  I cannot wait to see what you design.



*Hot off the presses, since I wrote and pre-scheduled this post, Blogger Buzz has more information, in which they indicate they will re-size your icon during the load process (if I understand correctly - - I did not test this.)
.