Favicons

This week we're creating Favicons.

Favicon is short for "favorite icon" and is the little photo/logo that appears on the tab when your website opens in the browser window. When you pull up Blogmama, you see a little photo of me:

I'm not on an ego trip, but I thought that tiny picture would be better than a "BM" or "BS." Just sayin'


This can be anything you like, it just has to be a photo image (.jpg, .gif or similar). The finished size will be 16x16 pixels which is TINY.

Choose a photo you love or, if you have time and want to be creative, create an icon. Whatever you choose, remember it will be re-sized REALLY small.

Think about these:

Twitter has the little bird, YouTube has the "play" button, Facebook has the F. What best represents you?

Once you have your image, you need to do a couple of things:
1. Crop it ABSOLUTELY square. If you don't, you'll get an error message.
2. Resize it smaller than 100kb.

Whatever photo editor you use will have a "resize" feature of some sort, so choose that and resize your photo until it is under 100 KB. (Every photo editor is different, so you may have to play around with this.)

Once your dimensions are right, save your photo.
Go back to Layout and click Edit

Click Choose File (notice: SQUARE image < 100kb), find your photo and click on it.

If it loads with no error message (file is perfectly SQUARE), you're in business!

Click Save, go to the top of the Design page and click Save Arrangement, and VOILA - you have a favicon! This will show up on most browser tabs and will show up in Google Reader.

NOTE: Browsers can be a little persnickety, especially Internet Explorer, and it may take a few minutes for your favicon to appear on your computer. (Your readers should see it immediately) Clearing your cache or closing and re-opening your browser window might help. 

I appreciate your comments and feedback - please leave yours below!