Icons - Make it and Use it!

Have you noticed the nifty little icons that a lot of web pages have next to their tab?  Blogger has a white "B" in an orange square, Gmail has an envelope with their "M" incorporated, and Flickr has two little dots next to each other - blue and pink.

This option is not just for fancy, big-name companies!  Even small business entrepreneurs, family blogs and any body can have their own icon.

For some web hosting sites, you'll need to switch to .ico format.  I love this site (http://favicon.htmlkit.com/favicon/) for converting an image from my computer into a .ico image.  This is also known as a FavIcon image.  If your web hosting requires an .ico image, any other format will not work (ex: .jpeg, .bmp, .png, etc.).  They have a video how-to if you need any help.  It will save the image to your downloads on your computer - and completely free!

Other web hosting sites (I know Blogger is this way) actually don't accept the .ico format (or they convert it on their own).  This shouldn't be a problem, though, because they accept the common image formats, like .jpeg, .png, or .bmp.

Okay, now how to make it?  Here's how!

1. Find or make an image that would work with the theme of your site or blog.  It needs to look good at tiny sizes, so don't pick anything too complicated.

• Don't pick photos - they don't look good when they are tiny!  Trust me, I tried.
• Use a Letter (that's what Blogger, Etsy, Google, Facebook, and Pinterest all use!)
• Or a Simple Drawing (not too many lines or fine details.  Images lose their quality in .ico format, so the simpler the better!)
• And Use Bright, Bold Colors (So many big businesses use bright primary colors to get attention.  It's a well-known advertising trick.  Even online it's good to be bold - think of Flickr, Twitter, and again, Blogger, Etsy, Google, Facebook and Pinterest.  What do they have in common? Bright, bold colors.)

Here are some pics I compiled (in Paint - nothing fancy!)

2. Next, you'll need to make sure that your image is perfectly square.  If you're in Paint, Picasa or PhotoShop, you can edit the pixels.  These instructions are for Paint:

• Click on Resize
• When the window opens, select Pixels
• Make sure the pixel numbers are equal.

I recommend somewhere between 100 sq. pixels and 400 sq. pixels.

3. If you are using a web hosting site that needs .ico format, it is now time to use the nifty tool at the FavIcon site.  It's very simple!  Again, if you need any help, they have a video to help you out on their main page.
If your site doesn't use .ico format, then go to step four.

4. Now it is time to upload!  You'll need to use the browse function to find where you saved the image.  In Blogger, it goes like this:

• Go to Layout
• Select Edit in the Favicon box (it should just be there - you don't have to add it as a gadget.)
• Upload the image.
• If this is your first time ever uploading, it shows up pretty fast in the tab.  However, I've noticed that sometimes it can take a few hours for a revised or different Favicon to show up in your tab.

5. Make sure you save any changes you have made, including the change of uploading an icon!