Blogging Tip...Add A Favicon For Blogger With No HTML Code

Have you noticed the little tiny picture some websites and blogs have next to their web or URL address? It also shows up next to the website's name in your favorites or bookmarks. That cute little picture is called a Favicon...short for Favorite Icon. It is a 16x16px image...really tiny.

If you research those little cuties, it can be very complicated (HTML Codes). There are websites that will take your gif, jpg, png, and bmp image and transform it into an ico. What does all that mean...I don't know...too many big computer words for me. I'm still learning as I go, but my goal is easy.

Until I figure it out, here's the easiest way to have a favicon next to your address.


First, you need a clear, crisp image or vector. I like the image on a white background. You can use one of your own or there are a hundred sites that have images. Some images are free (you have to give credit though) and some you have to pay a small fee. Please read all the rules for the free images on each site. These are my favorite sites below.

Free Digital Photos

Dreamstime

123rf

Here's a quick tutorial on how to do it...

If you need an image, browse through the sites above. This one is easy and free with credit give to the photographer. Free Digital Photos...I have no affiliation with them just like the ease of use.

I found this red flower as an example...

In the picture below on the right, I have circled the size (400x400), where it's free and the credit that needs to be given.

After you have saved and down loaded your picture to your computer, you need to upload it to PicMonkey. Remember I did a post on PicMonkey a while back...it's my new Picnik since they are closing.

Once uploaded to PicMonkey, you need to either "Resize" or "Crop and Resize". For me this picture was 400x400 (square) and the image was in the center, so no need to crop.

For Blogger Favicons, the image has to be 100x100 or smaller. Click "Resize" and type in 100x100 then "Apply".  Now save this image to your computer. Type in a name so you'll know which one is the resized one...like Red Flower 100 or Red Flower 16

You might want to experiment with the size you make your photo. Maybe going right to the 16x16 image would work better for the picture you have. You won't know until you add it to your blog. (that's in the steps that follow)

Here's my 100x100 image. This image is from this source.

To add that little cutie to your blog, go to the "Design" page. Click the edit button next to the Favicon section (circled below).

Click the Browse button to find where you saved you Resized image.

Once you select the image, click the save button and you're done!! You can keep going back and removing the image and adding another size again until it looks right to you.

It may take a little time for the image to show up. Some browsers may not support this either, but it's cute next to your blog name in your blogger reading list.

Hope this is easier than reconfiguring an image and then getting an HTML code which you then have to go into expand your widget section. That whole section scares me, especially when they tell you to back up your blog first!! Not for me just for a tiny picture.

Have fun with it. I've changed mine several times already...it's a button now. We'll see how long that lasts!
~Karen~